マップエリアコレクション
例
特定の画像マップにある<area>要素の数を調べます。
var x = document.getElementById("planetmap").areas.length;
xの結果は次のようになります。
3
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
areaコレクションは、画像マップ内のすべての<area>要素のコレクションを返します。
注:コレクション内の要素は、ソースコードに表示されるとおりに並べ替えられます。
ヒント: href属性が指定されているすべての<area>要素のコレクションを返すには、 linksコレクションを使用します。
ブラウザのサポート
Collection | |||||
---|---|---|---|---|---|
areas | Yes | Yes | Yes | Yes | Yes |
構文
mapObject.areas
プロパティ
Property | Description |
---|---|
length | Returns the number of <area> elements in the collection. Note: This property is read-only |
メソッド
Method | Description |
---|---|
[index] | Returns the <area> element from the collection with the specified index (starts at 0). Note: Returns null if the index number is out of range |
item(index) | Returns the <area> element from the collection with the specified index (starts at 0). Note: Returns null if the index number is out of range |
namedItem(id) | Returns the <area> element from the collection with the specified id. Note: Returns null if the id does not exist |
技術的な詳細
DOMバージョン: | コアレベル2ドキュメントオブジェクト |
---|---|
戻り値: | ドキュメント内の画像マップ内のすべての<area>要素を表すHTMLCollectionオブジェクト。コレクション内の要素は、ソースコードに表示されるとおりに並べ替えられます |
その他の例
例
[インデックス]
画像マップの最初の<area>要素のURLを取得します。
var x = document.getElementById("planetmap").areas[0].href;
xの結果は次のようになります。
https://www.w3schools.com/jsref/sun.htm
例
item(インデックス)
画像マップの最初の<area>要素のURLを取得します。
var x = document.getElementById("planetmap").areas.item(0).href;
xの結果は次のようになります。
https://www.w3schools.com/jsref/sun.htm
例
namedItem(id)
画像マップでid = "myArea"を使用して<area>要素のURLを取得します。
var x = document.getElementById("planetmap").areas.namedItem("myArea").href;
xの結果は次のようになります。
https://www.w3schools.com/jsref/mercur.htm
例
画像マップ内のすべての<area>要素をループして、各領域の形状を出力します。
var x = document.getElementById("planetmap");
var txt = "";
var i;
for (i = 0; i < x.areas.length; i++) {
txt = txt + x.areas[i].shape + "<br>";
}
txtの結果は次のようになります。
rect
circle
circle
❮マップオブジェクト