<map>: The Image Map element

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

The <map> HTML element is used with <area> elements to define an image map (a clickable link area).

Try it

<map name="infographic">
  <area
    shape="poly"
    coords="130,147,200,107,254,219,130,228"
    href="https://developer.mozilla.org/docs/Web/HTML"
    alt="HTML" />
  <area
    shape="poly"
    coords="130,147,130,228,6,219,59,107"
    href="https://developer.mozilla.org/docs/Web/CSS"
    alt="CSS" />
  <area
    shape="poly"
    coords="130,147,200,107,130,4,59,107"
    href="https://developer.mozilla.org/docs/Web/JavaScript"
    alt="JavaScript" />
</map>
<img
  usemap="#infographic"
  src="/shared-assets/images/examples/mdn-info2.png"
  alt="MDN infographic" />

img {
  display: block;
  margin: 0 auto;
  width: 260px;
  height: 232px;
}

Attributes

This element includes the global attributes.

name: The name attribute gives the map a name so that it can be referenced. The attribute must be present and must have a non-empty value with no space characters. The value of the name attribute must not be equal to the value of the name attribute of another <map> element in the same document. If the id attribute is also specified, both attributes must have the same value.

Examples

Image map with two areas

Click the left-hand parrot for JavaScript, or the right-hand parrot for CSS.

HTML

<!-- Photo by Juliana e Mariana Amorim on Unsplash -->
<map name="primary">
  <area
    shape="circle"
    coords="75,75,75"
    href="https://developer.mozilla.org/docs/Web/JavaScript"
    target="_blank"
    alt="JavaScript" />
  <area
    shape="circle"
    coords="275,75,75"
    href="https://developer.mozilla.org/docs/Web/CSS"
    target="_blank"
    alt="CSS" />
</map>
<img
  usemap="#primary"
  src="parrots.jpg"
  alt="350 x 150 picture of two parrots" />

Result

Technical summary

Content categories	Flow content, phrasing content, palpable content.
Permitted content	Any transparent element.
Tag omission	None, both the starting and ending tag are mandatory.
Permitted parents	Any element that accepts phrasing content.
Implicit ARIA role	No corresponding role
Permitted ARIA roles	No `role` permitted
DOM interface	`HTMLMapElement`

Specifications

Specification
HTML # the-map-element

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android
`map`	1	12	1 ["Before Firefox 5, in Quirks Mode, empty maps were no longer skipped over in favor of non-empty ones when matching.", "Before Firefox 17, the default styling of the `<map>` HTML element was `display: block;`. This is now `display: inline;` and matches the behavior of the other browsers. It was already the case in Quirks Mode."]	15	1	18	4	14	1	1.0	4.4
`name`	1	12	1	15	1	18	4	14	1	1.0	4.4