HTML DOM Map オブジェクト詳解：画像マッピング領域の定義
この記事では、HTML DOM の map オブジェクトについて詳しく解説します。map オブジェクトの属性、メソッド、HTML で map オブジェクトを使用して画像マッピングを作成し、画像の異なる領域をクリックして異なるリンクにジャンプする機能を実装する方法について説明します。
1. HTML DOM Map オブジェクトとは？
Map オブジェクトは、画像マッピングを表し、画像内の複数の領域を定義するために使用されます。各領域は、異なる URL にリンクすることができます。
Map オブジェクトは <map> タグで作成され、<area> タグを使用して領域を定義します。
2. Map オブジェクトの属性
areas: map オブジェクト内のすべての Area オブジェクトを含むコレクションを返します。
3. Map オブジェクトの使用方法
3.1. Map オブジェクトの作成
<map> タグを使用し、一意の name 属性を指定します。
<map name="myMap">
</map>
3.2. 領域の定義
<map> タグ内で <area> タグを使用し、以下の属性を設定して領域を定義します。
shape: 領域の形状。rect（矩形）、circle（円形）、poly（多角形）、default（デフォルト）のいずれかを指定できます。coords: 領域の境界座標を定義する数値のリスト。具体的な形式は、shape属性の値によって異なります。href: 領域をクリックしたときにジャンプする URL を指定します。target: リンクを開くターゲットウィンドウまたはフレームを指定します。alt: 画像が表示されない場合に表示される代替テキストを指定します。
<area shape="rect" coords="0,0,100,100" href="https://www.example.com" target="_blank" alt="Example Website">
3.3. Map オブジェクトと画像の関連付け
<img> タグで usemap 属性を使用し、その値に map オブジェクトの name 属性の値を設定します。
<img src="image.jpg" usemap="#myMap">
4. Map オブジェクトの例
以下の HTML コードは、map オブジェクトを作成し、領域を定義し、それを画像に関連付ける方法の例を示しています。
<!DOCTYPE html>
<html>
<head>
<title>Map オブジェクトの例</title>
</head>
<body>
<img src="image.jpg" usemap="#myMap" alt="画像の説明">
<map name="myMap">
<area shape="rect" coords="0,0,100,100" href="https://www.example.com" target="_blank" alt="Example Website">
<area shape="circle" coords="200,100,50" href="https://www.google.com" target="_blank" alt="Google">
</map>
</body>
</html>
まとめ
この記事では、HTML DOM Map オブジェクトとその使用方法について解説しました。Map オブジェクトを使用すると、画像マッピングを作成し、Web ページにインタラクティブな要素を追加できます。
よくある質問
Q1: Map オブジェクトは、すべてのブラウザでサポートされていますか？
A1: はい、Map オブジェクトは、すべての主要なブラウザでサポートされています。
Q2: <area> タグの shape 属性には、どのような値を指定できますか？
A2: rect（矩形）、circle（円形）、poly（多角形）、default（デフォルト）のいずれかを指定できます。
Q3: Map オブジェクトを使用して、画像以外の要素にマッピング領域を作成することはできますか？
A3: いいえ、Map オブジェクトは、<img> タグで定義された画像のみに使用できます。