HTML and CSS Reference
At its most basic, an image map looks like:
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">
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.
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
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.
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:
If you prefer XHTML-style syntax, you'd include a trailing slash:
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.