usemap (HTML attribute)

Spec
Depr. Version
No HTML 2
Browser support (more…)
IE5.5+ FF1+ SA1.3+ OP9.2+ CH2+
Full Full Full Full Full

Syntax

usemap="#map name"

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.

Figure 1. Dreamweaver shows the clickable areas on the image in Design View Dreamweaver shows the clickable areas on the image in the design view

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

Related Products