Quick Reference: Image Maps

Image maps are fun to create and can give you a real feeling of accomplishment the first time you see them working on your Web site. However, that feeling of accomplishment should not be allowed to cloud some of the problems that come along with image maps. Don’t allow yourself to get so carried away with the fun of creating image maps that you forget why they’re on your page—to help people find their way around. Make sure that your image maps are easy to understand and always provide an alternate, text-based means of navigation. The following table will help you remember the details of creating image maps:

To Do This	Use This
Define a client-side image map	<map> </map>
Assign a name to your map	<map name="mymap"> (deprecated) or <map >
Specify coordinates for hotspots on a client-side image map	<map > <area /> </map>
Specify the type of shape you are mapping	<area shape=“polygon” /> (or circle or rectangle)
Specify coordinates for a rectangle	<area shape=“rectangle” coords=“x, x, x, x” /> Plot the coordinates for the upper-left and lower-right corners
Specify coordinates for a circle	<area shape=“circle” coords=“xx, xx, xx” /> Plot the coordinates for the center of the circle (first two numbers); then do the same for the radius
Plot the radius of a circle	Find the coordinate at the middle-left side of the circle. Repeat for the middle-right side Subtract the smaller number from the larger Divide the result in half
Specify coordinates for a polygon	<area shape=“polygon” coords=“x,x, x,x, x,x, x,x “/> Start at the upper-left point and move clockwise, plotting the coordinates at angles and direction changes
Specify the image you want to use for your image map	<img src="/books/4/238/1/html/2/image.gif" usemap="mymap" />
Use your web browser to plot coordinates for an image map	<a href="nolink.htm"> <img src="/books/4/238/1/html/2/image.gif" ismap="ismap" /> </a>