Foundation HTML5 with CSS3

Linking the Web

At its most basic, an image map looks like:

<map name="crime-map"></map>

Currently, no regions exist within the map and it has no association with an image on the page. This image

map is ostensibly useless, but it’s still perfectly valid.

Let's associate the image map with an img element:

<img src="crime-map.jpg" alt="Crime Map" usemap="#crime-map">

<map name="crime-map"></map>

Easy, right? The usemap attribute of the img element associates the image map with the graphical image.

This means that any area elements added to the map will be applied to the crime map image. Note that the

usemap attribute's value must begin with a hash character.

Required Attributes

 name: gives the map a name that allows for association with an image via the usemap attribute.

The value of the name attribute must be a string at least one character long and can't contain

spaces.

Optional Attributes

Aside from the global attributes available to all elements, there are no additional optional attributes. There

is, however, the following caveat relating to the id attribute.

Should you define an id attribute on the map element, its value must be exactly the same as the value of

the name attribute:

<map name="crime-map" id="crime-map"></map>

The id attribute isn’t required, but when it comes to the map element, if both the name and the id attributes

are present, their values must match exactly.

area

The area element represents an area on an image map. If the href attribute is specified on an area

element, the corresponding region on the image is clickable. Otherwise, the area element defines a dead

region on the image map.

area elements, like img elements, are void elements and don't have an end tag. If you are using HTML-

style syntax, you’d write an area element like this:

<area>

If you prefer XHTML-style syntax, you’d include a trailing slash:

<area />

Either method is appropriate, so long as you generally pick one and stick to it. Consistency counts! For the

examples in this chapter, we’ll be using the HTML-style syntax with no trailing slash.