W3cubDocs

/Web APIs

HTMLMapElement: areas property

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 areas read-only property of the HTMLMapElement interface returns a collection of <area> elements associated with the <map> element.

Value

A HTMLCollection object of HTMLAreaElement elements.

Example

<map id="image-map">
  <area shape="circle" coords="50,50,35" alt="left arrow" />
  <area shape="circle" coords="150,50,35" alt="right arrow" />
</map>
<img
  usemap="#image-map"
  src="left-right-arrow.png"
  alt="left right arrow image" />
<output></output>

const mapElement = document.getElementById("image-map");
const outputElement = document.querySelector("output");

for (const area of mapElement.areas) {
  area.addEventListener("click", (event) => {
    outputElement.textContent = `You clicked on the ${area.alt} area.\n\n`;
  });
}

Results

Specifications

Specification
HTML> # dom-map-areas-dev>

Browser compatibility