usemap (HTML attribute)
| Depr. | Version |
|---|---|
| No | HTML 2 |
| IE5.5+ | FF1+ | SA1.3+ | OP9.2+ | CH2+ |
|---|---|---|---|---|
| Full | Full | Full | Full | Full |
Syntax
Description
The
usemap attribute tells the browser which map element in the document it should refer
to. Then one or more hotspots (specified in the area element) are defined, to act as
overlays on the image. These areas are similar to links (the a element) in that they allow the user to
click to go to the page identified in the area’s
href attribute (they’re also
keyboard-navigable).
When an image map is defined in this way, the image displays no hint that the area is actionable. The image must, in itself, hint at the clickable areas, perhaps by containing button-like features, or by the presence of instructional text near to the image. The clickable areas are visible at design time in some web authoring applications, such as Dreamweaver, which shows the clickable areas as depicted in Figure 1.
Example
Here, the
usemap attribute references a map named
"bigthings":
<map name="bigthings" id="bigthings">
<area shape="rect" coords="35,4,205,108"
href="http://en.wikipedia.org/wiki/Australia's_Big_Things"
alt="Australia's Big Things (on Wikipedia)"/>
<area shape="rect" coords="136,163,255,230"
href="http://vwkombi.com/"
alt="The VW Kombi, another Aussie icon"/>
</map>
⋮
<p><img src="giant-prawn.jpg" alt="The Giant Prawn at Ballina"
usemap="#bigthings"/></p>
Value
This attribute takes as
its value a reference to the map’s name attribute
in the form of a hash character ("#") plus the
"name", like so:
usemap="#bigthings"
Compatibility
| Internet Explorer | Firefox | Safari | Opera | Chrome | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 5.5 | 6.0 | 7.0 | 8.0 | 1.0 | 1.5 | 2.0 | 3.0 | 3.5 | 1.3 | 2.0 | 3.1 | 4.0 | 9.2 | 9.5 | 10.0 | 2.0 |
| Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full |
It causes no compatibility issues, and has excellent support across all tested browsers.
User-contributed notes
There are no comments yet.
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.