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:
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:
shape | can be rect, circle or poly | ||||||
---|---|---|---|---|---|---|---|
alt | text to display on hover | ||||||
href | URL to link to | ||||||
target | Same as in anchor tag | ||||||
coords |
|
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.