rectangle area
```
<area shape="rect" href="http://webdesign.about.com/" coords="0,0,10,20" />
```
Note, the coordinates - the first is the upper left corner (0,0) and the second is the lower right corner (10,20). View
circle area
```
<area shape="circle" href="http://webdesign.about.com/" coords="0,10,8" />
```
Note, the coordinates - the first coordinate is the center of the circle (0,10) and the second number is the radius (distance from the center) (8) in pixels. View
polygon area
```
<area shape="poly" href="http://webdesign.about.com/" coords="10,0,20,10,0,10,10,0" />
```
Note, the coordinates - there can be any any number of coordinates. In this map there are three - 10,0 20,10 0,10 - to create a triangle. The final coordinate closes the triangle by repeating the first coordinate. View
default area
```
<area shape="default" nohref="nohref" />
```
In this area, the default area is not clickable and so uses the nohref attribute. View

Remember to use the trailing slash in your area tag - but precede it with a space so that less-compliant browsers aren't confused.
Many older browsers don't support the shape="poly" attribute. Use this option with care.
Some voice and text browsers don't support client-side image maps, so it's a good idea to use alternative navigation on your page as well.
If the radius of the circle is a percentage, the browsers should calculate the final value based on the object's width and height. The radius will be the smaller of the two.
With a polygon, it's good practice to repeat the first coordinates at the end of the list - to close the shape.
It's usually easier to create an image map with an editor than by hand - there are lots of image map editors available, some are even free.

Jennifer Kyrnin
Web Design / HTML Guide

Explore Web Design / HTML

Must Reads