bunny run Visual QuickStart Guides from Peachpit Press
bunny foot
 
Appendix A: The Image Map Editor
index | previous


 
Fig. 10  I drew the California shape with the polygon tool. To close a polygon, double-click on the point where the last line meets the first line. To move a point, first close the polygon, then click a point and drag to reposition it.

 

 

 

Image Map Tips

  • Not all browsers support client-side image maps. Navigator 2 or later and MSIE 3 or later support them.

  • However, you can set both client-side and server side image maps on the same page. Browsers that support client-side image maps will give them priority.

  • Be sure to provide text equivalents for the links in an image map on the same page or a separate page so that users with low-end browsers can still get to the information. Yes, use Alt tags, but provide some other table of contents, too.

  • After you set a link in the image map, make sure the image border is set to 0, or it will have a visible border in most Web browsers. Of course, if you want a border, you can set that in the Properties inspector, too.

  • To reposition a hotspot, click on it and drag it to a new location.

  • To remove a hotspot, select the pointer tool (the arrow on the Properties inspector), and then press Delete.

  • To draw a polygon (Figure 10), click at the beginning and end of each straight line that's a side of the polygon. Double-click on the end of the final line to close the polygon.

  • After you draw a polygon, you can change the location of points on the polygon by clicking on the pointer tool and then clicking and dragging the point. You can do this with rectangles and ovals, too, to resize them.

The code for a client-side image map looks like this:

<img src="picture.gif" width="400" Height="350" usemap="#pict">
<map name="pict">
<area shape="rect" coords="299,93,378,124" href="cumin.html">
<area shape="circle" coords="262,-8,15" href="basil.html"> <area shape="poly" coords="51,8,117,35,111,145,32,149,100,107,31, 94,83,61,56,44,49,38,49,8" href="oregano.html">
</map>

Note that you don't need to close the <img> tag, but you do need to close the <map> tag.

To delete all the map stuff from an image, just delete the <map> tags and everything in them. You can select the <map> tags in the tag selector (in the Document window status bar), or you can click on the Image Map placeholder icon and press delete.