usemap (HTML attribute)
| IE5.5+ | FF1+ | Saf1.3+ | Op9.2+ |
|---|---|---|---|
| Full | Full | Full | Full |
| Depr. | Version |
|---|---|
| No | HTML 2 |
Example
The usemap
attribute referencing 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>
Description
The
usemap attribute tells the browser which map element in the document
it should refer to, in which one or more ‘hotspots’ (the area element) are defined
which act as ‘overlays’ on the image. These areas are similar to links
(the a element), allowing
the user to click to go to the page identified in the respective
area’s href attribute (they are
also keyboard-navigable).
When an image map is defined in this way, there is no hint on the image that the area is clickable/does something. The image must, in itself, hint that there are clickable areas, perhaps by containing button-like features. Alternatively, you would need to provide some instruction in text near to the image. The clickable areas are visible in some web authoring applications at design time, for example Dreamweaver, which shows the clickable areas as shown in Figure 1.
Value
Reference to the map’s
name attribute in the form of a hash character
(‘#') plus the "name", e.g:
usemap="#bigthings"
Compatibility
| IE | 5.5 | Full |
|---|---|---|
| 6.0 | Full | |
| 7.0 | Full | |
| Firefox | 1.0 | Full |
| 1.5 | Full | |
| 2.0 | Full | |
| Safari | 1.3 | Full |
| 2.0 | Full | |
| 3.0 | Full | |
| Opera | 9.2 | Full |
| 9.5 | Full |
Causes no compatibility issues. It 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.
