map (HTML element)

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

Syntax

<map name="string">
</map>

Description

The map element is a container for a number of area elements that define specific areas within an image. The map has one required attribute, the name attribute, which is associated with the image’s usemap attribute to create a relationship between the image and the map.

Note that not every area needs to be actionable. It’s perfectly acceptable to use area without an href attribute for the purposes of outlining a given area, and for providing additional help in the form of a tooltip created using the title attribute. However, this technique is inaccessible to people who use anything other than a mouse to navigate the web page, since there will be no mouse hover event for those users—the usual trigger for the tooltip display.

Example

This code defines an image map named "bigthings":

<map name="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>

Use This For …

This element is used to create specific clickable hotspots within a single larger image, and provides an alternative to the process whereby a larger image is sliced into smaller images, and numerous links are created using the a element.

In the past, the map and area elements have often been used to create navigation bars and the like. However, that approach is used with decreasing frequency, as CSS support is excellent, and in most cases provides a more suitable mechanism for creating navigation blocks.

Other examples for the usage of the map element include:

  • identifying regions on a map, be they countries on a world map or areas on regional maps
  • outlining locations in a floor plan—for example, a shopping mall or theme park
  • creating an overlay for a photo whose different components or features need identification—for example, highlighting the parts of the inside of a laptop computer for the purposes of repair

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.

In this Section

User-contributed notes

There are no comments yet.

Related Products