マップエリアセット

HTML DOM マップ オブジェクト

定義と使用方法

area セットがイメージマップ内のすべての <area> 要素 のセット。

コメント：コレクション内の要素は、ソースコード内で現れる順序に並べ替えられます。

ヒント：すべての規定された href 属性を持つ <area> 要素 のセット、使用してください links セット。

インスタンス

例 1

指定されたイメージマップ内の<area>要素の数を確認します：

var x = document.getElementById("planetmap").areas.length;

自分で試してみてください

xの結果は：

3

ページの下部にさらに多くのTIY例があります。

構文

mapObject.areas

属性

値 説明
length

コレクション内の<area>要素の数を返します。

コメント：この属性は読み取り専用です

メソッド

メソッド 説明
[index]

指定された索引を持つ<area>要素（0から始まる）を含むコレクションを返します。

コメント：索引番号が範囲外の場合、nullを返します。
item(index)

指定された索引を持つ<area>要素（0から始まる）を含むコレクションを返します。

コメント：索引番号が範囲外の場合、nullを返します。
namedItem(id)

指定されたidを持つ<area>要素を含むコレクションを返します。

コメント：idが存在しない場合、nullを返します。

技術的詳細

DOM バージョン： Core Level 2 Document Object
返り値：

HTMLCollection オブジェクトは、ドキュメント内のイメージマップ内のすべての <area> 要素を表します。

コレクション内の要素は、ソースコード内で現れる順序に並べ替えられます。

ブラウザサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート

さらに多くの例

例 2：[index]

イメージマップ内の最初の<area>要素のURLを取得します：

var x = document.getElementById("planetmap").areas[0].href;

自分で試してみてください

xの結果は：

https://www.codew3c.com/jsref/sun.html

例 3：item(index)

イメージマップ内の最初の<area>要素のURLを取得します：

var x = document.getElementById("planetmap").areas.item(0).href;

自分で試してみてください

xの結果は：

https://www.codew3c.com/jsref/sun.html

例 4：namedItem(id)

id="myArea"の<area>要素のURLを取得します：

var x = document.getElementById("planetmap").areas.namedItem("myArea").href;

自分で試してみてください

xの結果は：

https://www.codew3c.com/jsref/mercur.html

例 5

すべての <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>";
}

自分で試してみてください

xの結果は：

四角
円
円

HTML DOM マップ オブジェクト