HTMLDOMエリアオブジェクト

HTML DOM Area Objectは、HTMLの画像マップに関連付けられています。エリアは基本的に、画像マップ内のクリック可能なエリアを表します。

imageオブジェクトは、オブジェクト内の要素を作成してアクセスするのに役立ちます。ユーザーの入力に基づいて、マップ内のクリック可能な領域を変更したり、画像マップの形状などを変更したりできます。エリア要素内のリンクを操作するためにも使用できます

プロパティ

エリアオブジェクトのプロパティは次のとおりです-

値	説明
alt	alt属性値を設定または返すため。
座標	エリアのコード属性を設定または返すため。
ハッシュ	href属性値のアンカー部分を設定または返すため。
ホスト	href属性値のホスト名とポート部分の両方を設定または返すため。
ホスト名	href属性値のホスト名部分を設定または返すため。
href	エリアのhref属性の値を設定または返すため。
noHref	領域のnohref属性の値を設定または返すこと。 HTML5では非推奨です。
起源	href属性値のプロトコル、ホスト名、およびポート部分を返すには。
パスワード	href属性値のパスワード部分を設定または返すため。
パス名	href属性値のパス名部分を設定または返すため。
ポート	href属性値のポート部分を設定または返すため。

例

エリアオブジェクトの例を見てみましょう-

<!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>Click the button to create an AREA element with a link to "Maya City", which is one of the New Seven Wonders of the World.</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 = "The AREA element was created, and
      you can now click on Maya City.";
   }
</script>
</body>
</html>

出力

これにより、次の出力が生成されます-

HTMLDOMエリアオブジェクト

CLICKITボタンをクリックした後-

HTMLDOMエリアオブジェクト

「マヤ市」をクリックすると、ウィキペディアのページに移動します。

上記の例では-

タグを使用して画像を含め、その幅、高さ、IDを指定しました。

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

次に、空の地図を作成しました。この地図に、後で画像やエリアなどを追加します-

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

次に、myWonder（）関数を実行するCLICKITという名前のボタンを作成しました。

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

myWonder（）関数は、最初に要素を作成し、それを変数xに割り当てます。 href、shape、cordsなどのさまざまな属性を設定します。最後に、変数xに関連付けられた要素を子ノードとして画像マップに追加し、作成されたarea要素も表示します。これで、innerHTML-

を使用して、IDが「Sample」の段落内の「Mayacity」をクリックできます。

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 = "The AREA element was created, and
   you can now click on Maya City.";
}

HTMLDOM記事オブジェクト

HTML DOM appendChild（）メソッド

HTMLDOMメーターオブジェクト
HTMLのHTMLDOMMeterオブジェクトは、要素を表します。注：は使用しないでくださいプログレスバーとして、ただしゲージとしてのみ。以下は構文です- を作成する要素 var meterObject = document.createElement(“METER”) ここで、「meterObject」は次のプロパティを持つことができます- プロパティ説明高ゲージのhigh属性の値を設定/返しますラベルゲージのラベルである要素のリストを返します低ゲージのlow属性の値を設定/返します
HTMLDOMUlオブジェクト
HTMLのHTMLDOMUlオブジェクトは、を表します要素。を作成する要素 var ulObject = document.createElement(“UL”) ここでは、「ulObject」次のプロパティを持つことができますが、 HTML5ではサポートされていません − プロパティ説明コンパクト順不同リストを通常より小さく表示するかどうかを設定/返しますタイプ順序付けされていないリストのtype属性の値を設定/返します順不同リストの例を見てみましょう要素- 例 <!DOCTYPE