files/en-us/web/api/htmlmapelement/areas/index.md
{{ApiRef("HTML DOM")}}
The areas read-only property of the {{domxref("HTMLMapElement")}} interface returns a collection of {{HTMLElement("area")}} elements associated with the {{HTMLElement("map")}} element.
A {{domxref("HTMLCollection")}} object of {{domxref("HTMLAreaElement")}} elements.
<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>
<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`;
});
}
{{EmbedLiveSample("Example",100,150)}}
{{Specifications}}
{{Compat}}