An Introduction to Image Maps and Hot Spots

Slide your cursor over the image above and you will see that the words and the areas near each of them are links. The image is called an image map and the linkable areas are called hot spots. To create an image map, you need to:

Creating the Map

To make an image map, start off by putting the image on the page using the standard IMG tag with the usual SRC, WIDTH, and HEIGHT attributes. Then add another attribute that will allow it to be used as an image map: the USEMAP attribute.

The USEMAP attribute is needed because the attributes that define the size, shape, and location of the hot spots are not attributes of the IMG tag. Instead, they are kept inside of a pair of opening and closing MAP tags that have within them AREA tags, one for each hot spot. The hot spots need to be associated with the image file that they are being applied to, the USEMAP and MAP tags are used to establish that relationship.

To name the image, almost any descriptive name will do. The image is assigned that name with the IMG tag's USEMAP=#NAME attribute. Don't forget to include the # sign. It is also a good idea to set a BORDER attribute to a value of 0, otherwise a blue border may appear around the edges of the image.

Defining the Hot Spots

The MAP tag is used to specify the shape, size, and coordinates of the "hot" areas. Look at the code for this page and you will see the MAP tag with three AREA tags nested inside of it. Each AREA tag defines one hot spot.

Each AREA tag needs to have a shape attribute. In code for this page we've used the RECT (for rectangle) shape. The location and the size of each rectangle is specified using the AREA tag's COORDS attribute. Two pairs of xy coordinates are required per rectangle. On the web, x and y coordinates are almost always provided in that order, x then y. In case you are not familiar with the Cartesian Coordinate System, x refers to the horizontal value, and y refers to the vertical. On the web, the x value increases going left and the y value increases going DOWN, which is not typical of Cartesian Coordinates (named for Rene DesCartes).

These coordinates designate the location (in pixels) of the upper left and lower right corners (respectively) of each rectangular hot spot. The measurements are relative to the upper left corner of the image.

Hot spots can also be in the shape of a circle (CIRCLE) or a polygon (POLY). In the case of a circle, three values are needed, the x and y coordinates of the center of the circle and the length of the radius (x,y,r). Polygons are defined by a pair of x,y coordinates for each point on the shape. Here's an example of a page that uses all three shapes (look in the code for them).

One of the problems with hand coding image maps is that you cannot see where they are going, so measurements need to be done in a program like Photoshop in order to know positions and sizes. Or else use an html editing program like Dreamweaver which will display the hot spots as light blue transparent overlays which is the easiest way to do it.

In the case of this exercise you will have to accept my word for it that the hot spots are over each of the words in the image. You can tell this by moving your mouse over the words and you will see the little hand with the pointing finger appear.

The MAP's code can be put anywhere in the BODY of the page. The MAP tag identifies the image that it is to be applied to with its NAME= attribute. The name's value is the USEMAP name specified in the IMG tag.

The HREF attribute comes next. That's the attribute we usually see with the <A> tag. HREF (hypertext reference) specifies what the hot spot is linking to. A TARGET can also applied (see below).

Targets

By adding the TARGET="_blank" attribute and value after the HREF attribute, you can get any link to open in a new window, thereby not replacing the current page. Each of the links in the AREA tags on this page has that TARGET attribute set. Targets always have an underscore at the start.

Your assignment:

  1. Save this file as E03_yourlastname.html
  2. If you have not done so already, download the image files that you will need for this and other exercises in this series following the instructions in A04_saveFiles1.html in the section named: "To get the image files that you need for your exercises". The image file for the above image will be amongst the files provided.
  3. Change the RECT attributes to CIRCLE. A typical visitor would not know the difference because the shapes are invisible to them (and to you too for that matter!). We are going to make the change simply to tive you practice with the code.
  4. We will keep the hot spots over each of the three words (again, you will need to take my word for it that they are already in that position). Substitute the following x,y,r (r for radius) values for each as follows:
  5. Change the URLs to Yahoo.com, Lycos.com, and Google.com, respectively.
  6. Save the file, and check the links in your browser.
  7. Online students, send your file to me by email.

 

© 2008 Dan Vaughan and its licensors. All rights reserved.