HTML DOM Mapオブジェクトの使い方を徹底解説！構文・プロパティ・サンプルコード付き

HTML DOM の Mapオブジェクト は、HTML の <map> 要素を JavaScript から操作するためのインターフェースです。<map> 要素は、1枚の画像上の特定の領域にそれぞれ異なるリンクを設定できる「クリッカブルマップ（イメージマップ）」を作成する際に使用されます。

構文

<map> 要素を新しく作成する場合は、以下のように記述します。

var mapObject = document.createElement("MAP");

Mapオブジェクトのプロパティ一覧

mapObject が持つ主なコレクションおよびプロパティは次のとおりです。

コレクション / プロパティ	説明
areas	マップ内のすべての <area> 要素のコレクションを返します。
images	このマップに関連付けられたすべての <img> 要素および <object> 要素のコレクションを返します。
name	<map> 要素の name 属性の値を取得または設定します。

サンプルコード：areas コレクションの活用例

次の例では、JavaScript で <area> 要素を動的に生成し、画像上の特定の領域（ギザのピラミッドの部分）にリンクを追加しています。

<!DOCTYPE html>
<html>
<head>
<title>Map areasコレクションの例</title>
<style>
    form {
        width: 70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin: 5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
<form>
<fieldset>
<legend>Map-areas-collection</legend>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/New7Wonders.jpg/276px-New7Wonders.jpg" width="250" height="150" usemap="#7Wonders">
<map id="WonderWorld" name="7Wonders">
</map>
<div id="divDisplay"></div>
<input type="button" value="リンクを適用" onclick="myWonder()">
</fieldset>
</form>
<script>
    function myWonder() {
        var divDisplay = document.getElementById("divDisplay");
        var newArea = document.createElement("AREA");
        newArea.setAttribute("href", "https://en.wikipedia.org/wiki/Giza_pyramid_complex");
        newArea.setAttribute("shape", "rect");
        newArea.setAttribute("coords", "120,10,10,40");
        document.getElementById("WonderWorld").appendChild(newArea);
        divDisplay.textContent = "リンクが適用されました。ギザのピラミッドの上にマウスを乗せてクリックしてみてください。";
    }
</script>
</body>
</html>

実行結果

このコードを実行すると、以下のような画面が表示されます。

「リンクを適用」ボタンをクリックする前：

HTML DOM Mapオブジェクトの使い方を徹底解説！構文・プロパティ・サンプルコード付き

「リンクを適用」ボタンをクリックした後：

HTML DOM Mapオブジェクトの使い方を徹底解説！構文・プロパティ・サンプルコード付き

ボタンをクリックすると、新しい <area> 要素が <map> 要素内に追加され、座標 (120,10,10,40) で指定された矩形領域に対して Wikipedia のギザ・ピラミッド複合体へのリンクが設定されます。画像の上にマウスカーソルを移動すると、該当エリアがクリック可能になっていることを確認できます。このように areas コレクションを利用することで、イメージマップのリンク領域を動的に制御できます。

HTML DOM Markオブジェクトとは？使い方をサンプルコード付きで解説

HTML DOMのLocation searchプロパティとは？URLクエリ文字列の取得・設定方法を解説

HTML DOM HRオブジェクトとは？作成方法と使い方を解説
HTML DOM の HR オブジェクトは、HTML 文書内の <hr> 要素を表すオブジェクトです。<hr> 要素は、コンテンツの話題やテーマの区切りを視覚的に示す水平線（罫線）として表示されます。JavaScript を使えば、この水平線を動的に生成してページに挿入することも可能です。ここでは、HR オブジェクトの基本的な作成方法と実践的な使用例を紹介します。HRオブジェクトの作成方法（構文）hr オブジェクトを新しく作成するには、document.createElement() メソッドを使用します。構文は以下のとおりです。document.createEleme
HTML DOM Ulオブジェクトとは？<ul>要素の操作方法とサンプルコードを解説
HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注