Using image Maps - HTML5 - page 88

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
polygon).

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.

➤ ➤

The 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.

➤ ➤

The 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.

➤ ➤

The 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
clockwise direction.

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”
usemap=”#usa”>
<map name=”usa”>
<area shape=”poly” coords=”87,162,95,236,157,231,147,153” href=”Wyoming.html”
alt=”Wyoming” title=”Wyoming”>
</map>

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.