Image Maps

Reading Pages 124-127

A client side image map is a bit of HTML that describes locations on an image that will be clickable. The spots, called hot spots, act like links.

First, we need an image, using the img tag, like this.
<img src="../images/paths1.jpg" width="783" height="293" alt="First pathname example tree" usemap="#paths1" border="0">
The new element here is the usemap attribute. This contains the name of an image map. That looks like this:


<map name="paths1">
<area shape="rect" alt="link to site index" coords="329,1,433,52" href="../index.html">
<area shape="rect" alt="assignment 1" coords="1,233,135,287" href="../asgs/asg1.html">
<area shape="default" nohref>
</map>

The map contains one or more area tags and has one attribute that is the name of the map. Each are tag has several attributes and describes one hot spot on the image. The attributes are:

shapecan be rect, circle or poly
alttext to display on hover
hrefURL to link to
targetSame as in anchor tag
coords
rectx_left, y_upper,x_right,y_lower
circlex_center, y_center, radius
polyx1,y1,x2,y2,x3,y3

There should be an area tag with a shape value of default. This is what will be used when the user clicks on parts of the image that are not hot spots. If you don't want anything to happen in that case, use the nohref attribute. All the position and size values in the map are in pixels. It is best to use some kind of image map editing software to get this right. The CD with the book has a trial version of MapEdit, which I used to produce the one in the example.

Image maps can make for very effective navigation tools. But be careful of complicated images as it can be hard to tell where the hot spots are and the use may get annoyed have to wave the mouse cursor of the picture looking for where it turns into a hand.