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 July 2015.
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>
js
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`;
});
}
結果
仕様書
Specification |
---|
HTML Standard # dom-map-areas-dev |
ブラウザーの互換性
BCD tables only load in the browser