HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM Areaオブジェクトとは？使い方と主要プロパティを解説

HTML DOM の Area オブジェクトは、HTML のイメージマップ（image map）に関連付けられたオブジェクトです。Area は、イメージマップ内にあるクリック可能な領域（リンク領域）を表します。

Area オブジェクトを使用すると、<area> 要素の作成やアクセスが可能になります。ユーザーの入力に応じて、マップ内のクリック可能な領域やイメージマップの形状などを動的に変更できるほか、area 要素内のリンクを操作することもできます。

Areaオブジェクトの主なプロパティ

Area オブジェクトには、以下のようなプロパティが用意されています。

プロパティ説明
altalt 属性の値を設定または取得します。
coordsarea 要素の coords 属性（座標情報）を設定または取得します。
hashhref 属性値のうち、アンカー部分（# 以降）を設定または取得します。
hosthref 属性値のうち、ホスト名とポート番号の両方を設定または取得します。
hostnamehref 属性値のうち、ホスト名部分を設定または取得します。
hrefarea 要素の href 属性の値を設定または取得します。
noHrefarea 要素の nohref 属性の値を設定または取得します。※HTML5 では非推奨です。
originhref 属性値のうち、プロトコル・ホスト名・ポート番号の部分を返します。
passwordhref 属性値のうち、パスワード部分を設定または取得します。
pathnamehref 属性値のうち、パス名部分を設定または取得します。
porthref 属性値のうち、ポート番号部分を設定または取得します。

サンプルコード

ここで、Area オブジェクトの具体的な使用例を見てみましょう。次のコードは、ボタンをクリックすると新しい <area> 要素を動的に生成し、イメージマップに追加する例です。

<!DOCTYPE html>
<html>
<body>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/New7Wonders.jpg/276pxNew7Wonders.jpg" width="400" height="400" usemap="#7Wonders">
<map id="WonderWorld" name="7Wonders">
</map>
<p>ボタンをクリックすると、「世界新七不思議」の一つである「マヤ都市」へのリンクを持つ AREA 要素が作成されます。</p>
<button onclick="myWonder()">CLICK IT</button>
<p id="SAMPLE"></p>
<script>
    function myWonder() {
        var x = document.createElement("AREA");
        x.setAttribute("href", "https://en.wikipedia.org/wiki/Maya_city");
        x.setAttribute("shape", "circle");
        x.setAttribute("coords", "124,58,16");
        document.getElementById("WonderWorld").appendChild(x);
        document.getElementById("SAMPLE").innerHTML = "AREA要素が作成されました。これでマヤ都市をクリックできます。";
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、まず次のような画面が表示されます。

「CLICK IT」ボタンをクリックすると、AREA 要素が生成され、メッセージが表示されます。

その後、画像上の「マヤ都市」の位置をクリックすると、対応する Wikipedia のページへ移動します。

コードの解説

このサンプルコードの流れを順番に見ていきましょう。

1. 画像の配置
まず、img タグで画像を読み込み、幅・高さと usemap 属性を指定しています。usemap 属性により、この画像が「7Wonders」という名前のイメージマップに関連付けられます。

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/New7Wonders.jpg/276pxNew7Wonders.jpg" width="400" height="300" usemap="#7Wonders">

2. 空のマップを作成
次に、後から area 要素などを追加するための空の map 要素を作成しています。

<map id="WonderWorld" name="7Wonders"></map>

3. ボタンの設置
クリックされると myWonder() 関数を実行するボタンを配置します。

<button onclick="myWonder()">CLICK IT</button>

4. myWonder() 関数の処理内容
myWonder() 関数では、まず document.createElement("AREA") によって新しい area 要素を生成し、変数 x に代入します。続いて、setAttribute() メソッドを使って href（リンク先）、shape（形状：円形）、coords（座標）といった各属性を設定します。

最後に、appendChild() を使って変数 x に格納された area 要素を、id「WonderWorld」のイメージマップの子ノードとして追加します。同時に innerHTML を利用して、id「SAMPLE」の段落に「AREA要素が作成されました。これでマヤ都市をクリックできます。」というメッセージを表示しています。

function myWonder() {
    var x = document.createElement("AREA");
    x.setAttribute("href", "https://en.wikipedia.org/wiki/Maya_city");
    x.setAttribute("shape", "circle");
    x.setAttribute("coords", "124,58,16");
    document.getElementById("WonderWorld").appendChild(x);
    document.getElementById("SAMPLE").innerHTML = "AREA要素が作成されました。これでマヤ都市をクリックできます。";
}

このように、JavaScript の Area オブジェクトを活用すれば、イメージマップのクリック領域を動的に追加・変更でき、インタラクティブな画像ナビゲーションを簡単に実装できます。

  1. HTML DOM Meterオブジェクトとは？使い方と主要プロパティを徹底解説

    HTML DOM Meterオブジェクトとは HTML DOMにおけるMeterオブジェクトは、HTMLの<meter>要素をJavaScriptから操作・制御するためのインターフェースです。<meter>要素は、ディスク使用量やアンケート結果など、既知の範囲内における値をゲージ（計器）として視覚的に表示する際に使用されます。 注意：<meter>要素はプログレスバー（進捗状況の表示）として使用しないでください。あくまでゲージとしてのみ使用するのがルールです。進捗表示には<progress>要素を使うのが適切です。 構文 <meter>

  2. HTML DOM Ulオブジェクトとは？<ul>要素の操作方法とサンプルコードを解説

    HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法 新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注