HTMLMapElement: areas プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

areas は HTMLMapElement インターフェイスの読み取り専用プロパティで、この <map> 要素に関連付けられた <area> 要素の集合を返します。

値

HTMLCollection オブジェクトで、HTMLAreaElement 要素の集合を表します。

例

html

<map id="image-map"> <area shape="circle" coords="50,50,35" alt="左矢印" /> <area shape="circle" coords="150,50,35" alt="右矢印" /> </map> <img usemap="#image-map" src="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 = `${area.alt}エリアをクリックしました。\n\n`; }); }