HTML5 24-Hour Trainer

Chapter 11. Using Image Maps

In Lesson 10, you saw how you could create a link from a single image. With image maps, it's possible to incorporate multiple links with just one image. What's more, these links can be virtually any shape: a rectangle, a circle, or a polygon. In this lesson, you learn how to add this valuable functionality to your designer's palette.

CREATING AN IMAGE MAP

To create an HTML image map, you need three separate but related pieces of code. First, a standard <img> tag is required to represent the image itself. There is one addition to the traditional <img> tag: a usemap attribute. For example,

<img src="usa.gif" width="637" height="399" alt="USA map" usemap="#usa">

The usemap attribute value must have a leading number sign, for example, #usa, and refers to an attribute found in the second code chunk, the <map> tag. The <map> tag is a simple one, with just the name attribute:

<map name="usa">
</map>

Note that in the <map> tag, the name value, which corresponds to the <img> tag's usemap value, does not have a leading number sign.

Within the <map> tag is the final component of an image map, one or more <area> tags. Each <area> tag has all the attributes necessary to create a linked region of the image. Here's a typical <area> tag:

<area shape="poly" coords="87,162,95,236,157,231,147,153" href="Wyoming.html"
 alt="Wyoming">

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