1. 開発者向けのウェブ技術
  2. Web API
  3. HTMLMapElement
  4. areas

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

HTMLMapElement: areas プロパティ

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

areasHTMLMapElement インターフェイスの読み取り専用プロパティで、この <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;
}
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`;
 });
}

結果

仕様書

仕様書
HTML
# dom-map-areas-dev

ブラウザーの互換性

関連情報

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって に最終更新されました。

AltStyle によって変換されたページ (->オリジナル) /