HTML and CSS Reference
The <area> tags include an attribute that specifies the kind of shape used for the linked region. The
shape attribute has three accepted values: circle , rect (short for rectangle), and poly (short for
Each of the shapes requires a different series of coordinates, stated as the coords value. These coor-
dinates are pixel measurements taken from the image, with the upper-left corner of the image serv-
ing as the origin point.
circle shape requires three numbers: two values that define the X and Y coordinates
for the center of the circle and a third for the radius of the circle.
rect shape has four numbers: The first pair of numbers form the X and Y coordinates
for the upper-left corner of the rectangle, and the second pair describes the X and Y coordi-
nates of the lower-right corner.
poly shape includes an even number of numbers, each a pair of X and Y coordinates
that, taken together, outline the polygon region. The X and Y coordinates are listed in a
Other attributes in the <area> tag are familiar ones: href and alt . As with the <a> tag, the href
attribute sets the path to a linked document or page section. You can use both absolute and relative
paths in the <area> href attribute. The title attribute can also be used to ensure that text appears
on hover in certain browsers.
Taken all together, the code for a simple image map might be:
<img src=”usa.gif” width=”637” height=”399” alt=”USA map” title=”USA map”
<area shape=”poly” coords=”87,162,95,236,157,231,147,153” href=”Wyoming.html”
When rendered in a browser, the only indication of a link on an image map is the pointer icon when
the user's mouse hovers over a defined <area> region and, in some browsers, a tooltip displaying the
alt or title value, as shown in Figure 11-1.
Plotting the coordinates for an image map can be a very tedious process with
just an image editor. Most web authoring tools, like Adobe Dreamweaver, have
image map drawing tools built-in. A number of online tools are also available,
one of which — http://www.maschek.hu/imagemap/imgmap — is used in the
Try It section that follows.