HTML and CSS Reference
In-Depth Information
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.
