Selected Image Map Tags and Attributes

Client side image maps involve <img>, <map>, and <area> tags.

The <img> tag is the same one we have always used to include images, but we add a new attribute, usemap which specifies the map to be overlaid on this image. The <map> tag just names the map.

The <area> tag does the work of defining hot regions within the image and specifying the URL they link to. You need one area tag for each hot spot, and can optionally specify a default if the user clicks outside all of them. The <area> tag uses the shape and coord attributes to specify the hot spot and the href attribute to specify the URL to jump to.

The allowable values of the shape attribute are: poly, circle, rect, and default:

circle: a circular region
rect: a rectangular region
poly: any irregular polygon
default: the region outside all other regions

The following example illustrates the circle, rect and default values of the <area> tag:

<BODY> <IMG SRC="lp.gif" USEMAP="#greeting" width="190" height="135"> <MAP NAME="greeting"> <AREA SHAPE=RECT COORDS="10,44,48,84" HREF="glass.htm"> <AREA SHAPE=CIRCLE COORDS="104,48,36" HREF="face.htm"> <AREA SHAPE=default HREF="background.htm"> </MAP> </BODY>

This is another example, this time using the poly attribute of the <area> tag. The coordinates describe an irregular polygon surrounding the two dogs.

<BODY> <IMG SRC="magimini.jpg" USEMAP="#magimini map" width="308" height="161"> <MAP NAME="magimini map"> <AREA SHAPE=POLY COORDS="124,47,135,51,139,63,137,80,134,92,132,103,127,104,125,109,113,109,113,104,97,106,94,98,95,89,89,87,91,78,97,79,113,70,115,69,113,67,107,66,109,54,112,49,121,45,125,48,124,47" HREF="mini.htm"> <AREA SHAPE=POLY COORDS="228,41,242,45,247,59,248,68,244,77,248,81,249,85,242,87,238,86,230,90,220,89,211,88,212,82,203,83,199,80,207,69,211,64,218,56,218,50,223,43,230,42,228,41" HREF="magi.htm"> <AREA SHAPE=DEFAULT HREF="nodog.htm"> </MAP> </BODY>

You can create image maps by hand, but that would be extremely tedious. An alternative is to use a tool like Map This, an image map editor. I chose Map This because it is free, not because I thought it was terrific. You can download a copy of MapThis from the class server.

Here is a picture of MapThis in action:

Disclaimer: The views and opinions expressed on unofficial pages of California State University, Dominguez Hills faculty, staff or students are strictly those of the page authors. The content of these pages has not been reviewed or approved by California State University, Dominguez Hills.