Image Maps

What are image maps?

Quite simply, an image map is a graphical image which allows the viewer to click on a portion of it to be redirected to another page, part of a page or another site.
They can be a very useful way of presenting information, or a series of choices to the viewer, and they can help with the challenge of directing someone around a site. Some examples of images maps which I have seen include:

• Maps of the world

• Thumb bars at the top/bottom of a screen

• Pictures of cyber villages

• Menu choices

However, you need to use image maps with caution, since many people use the Web with their images turned off. As a result, they may not see the map, and you also need to present the same information in a textual format.

An example image map

Markup used

<A HREF="map2">
<IMG SRC="map.gif" ALT="Image Map"
USEMAP="#map2"
ISMAP="ISMAP">
</A>
<MAP NAME="map2">
<AREA SHAPE="RECT" COORDS="-1,-1,100,100" HREF="red.htm">
<AREA SHAPE="RECT" COORDS="101,-2,201,101 HREF="blue.htm">
<AREA SHAPE="RECT" COORDS="-2,100,100,200" HREF="yellow.htm">
<AREA SHAPE="RECT" COORDS="99,100,201,201" HREF="green.htm">
</MAP>

Elements

• <A HREF="map2">
  • This sets up the name of the map to be used. The A is used as the anchor.

• <IMG SRC="map.gif" ALT="Image Map"
  • The image source and the alternative text

• USEMAP="#map2"
  • Adding a USEMAP attribute indicates that it is a client-side image map. The USEMAP attribute can be used with the ISMAP attribute to indicate that the image can be processed as either a client-side or server-side image map.

• ISMAP="ISMAP">
  • The ISMAP (is map) attribute identifies an image as an image map. The final > closes off the tag.

• <AREA SHAPE="RECT" COORDS="-1,-1,100,100" HREF="red.htm">
  • Specifies the section(s) of the map, lists co-ordinates and provides a reference to an appropriate page.

Creating image maps

Image maps are not difficult, but they are tricky to get right. As you can see, you need to be able to provide the correct co-ordinates to link to the right pages. You can either make a note of these on your graphic image when you're creating or editing it using a graphics package, or you can get your authoring tool to take care of this, if it has an image mapping utility as part of the package.
You should choose your image carefully when deciding on one to use as an image map. A good image will be something like a real map, with borders, or a geometric pattern, or a series of boxed images - in fact anything with clearly defined edges and 'sections' to the image. A poor image to use as an image map would be a photograph or a picture for example, since you're not sure what to click on