Firefox Tomorrow

web api instance property

HTMLMapElement: areas property

View on MDN ↗

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" name="image-map">
  <area shape="circle" coords="50,50,35" href="#left" alt="left arrow" />
  <area shape="circle" coords="150,50,35" href="#right" alt="right arrow" />
</map>
<img
  usemap="#image-map"
  src="/firefox/mdn-assets/api/htmlmapelement/areas/left-right-arrow.png"
  alt="left right arrow image" />
<output></output>

output {
  display: block;
}

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

Interactive exampleOpen the canonical MDN source to run this embedded demo.

Specifications

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.

See also