# 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

`<img src="/books/4/238/1/html/2/image.gif" usemap="mymap" />`

`<a href="nolink.htm">   <img src="/books/4/238/1/html/2/image.gif" ismap="ismap" /></a>`

How to Do Everything with HTML & XHTML
ISBN: 0072231297
EAN: 2147483647
Year: 2003
Pages: 126

Similar book on Amazon