usemap (HTML attribute)

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


usemap="#map name"


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


Here, the usemap attribute references a map named "bigthings":

<map name="bigthings" id="bigthings">
  <area shape="rect" coords="35,4,205,108"
      alt="Australia's Big Things (on Wikipedia)"/>
  <area shape="rect" coords="136,163,255,230"
      alt="The VW Kombi, another Aussie icon"/>
<p><img src="giant-prawn.jpg" alt="The Giant Prawn at Ballina"


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:



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