Imagemaps are nothing more than an image where specified areas (of the image) can be clicked on and used as hyperlinks. Essentially, regions of the image are declared along with actions that are performed when that region is clicked. Try clicking on the 4 different areas of the image below:

Go to the Top Left page Go to the Top Right page Go to the Bottom Left page Go to the Bottom Right page Image Map 1

    As you see, clicking on different areas of the image takes you to a different page. Notice that if you hold the mouse pointer over a section of the image, a small box pops up describing the purpose of clicking that area. Take a look at the code for the above image map:

<center>
<MAP NAME=map1>
<AREA HREF="tl.htm" ALT="Go to the Top Left page" COORDS="0,0,200,50">
<AREA HREF="tr.htm" ALT="Go to the Top Right page" COORDS="200,0,400,50">
<AREA HREF="bl.htm" ALT="Go to the Bottom Left page" COORDS="0,50,200,100">
<AREA HREF="br.htm" ALT="Go to the Bottom Right page" COORDS="200,50,400,100">
</MAP>
<IMG SRC="pics/imgmap1.JPG" ALT="Image Map 1" USEMAP="#map1">
</center>

    Notice that there's 4 lines of code between the map tags (which correspond to the 4 logical areas of the image). The following attributes of the <AREA> tag serve the following purposes:

  • HREF: Lists the URL that will come up on the screen when you select that region.
  • ALT: Provides the text that will appear when the mouse pointer is held over that region.
  • COORDS: Defines a region of the image map.

        The COORDS attribute is probably the toughest part, of image maps, to master. Note that there are 4 numbers in each COORDS occurence; these correspond to two sets of x & y coordinates in the image. Take a look at the example below:

        The numbers in the above image are the x & y coordinates, in pixels, of the various locations that the arrows point at. Using the top left hand corner as the origin (0, 0), this image was determined to be 400 pixels wide by 100 pixels high: the same as the above image map. Imagine then, that you wanted to define a rectangular area whose top left hand corner was at the middle of the image, and it's bottom right hand corner was at the bottom right hand corner of the whole image. You then end up with two sets of coordinates: 200, 50 (x & y for the top left hand corner of the region) and 400, 100 (x & y for the bottom right hand corner of the region). Put these two sets of coordinates together and you get 200, 50, 400, 100 (x1, y1, x2, y2). Go back and take a look at the COORDS value in the code above for the bottom right box (br.htm) of the image map.

        The default shape of a region in an image map is rectangular. You can, however, define polygons and circles as region-types. Please see the SHAPE attribute for the <AREA> tag for more info on that.

        One last note on image maps: You rarely, if ever, will want to use an image map like the one above. Usually, you'll have an image where you only want SOME regions of that image to be "clickable". However, the process is still the same: Define the regions of the "clickable" areas first, then code it. You can use practically ANY graphical editing program to determine the size, in pixels, of an image. You can then estimate the x & y coordinates, again...in pixels, of the regions you want to use.

    Click here to return to the previous page.