<map>タグは、イメージマップを表す際に使用します。
map要素は、img要素およびその子孫のarea要素と連携して、イメージマップを定義します。 イメージマップとは、画像中の座標で領域を指定してリンクを設定することです。 一枚の画像中に複数のリンクを設定することもできます。
イメージマップを使用すると、画像中の幾何学形状のエリアをハイパーリンクエリアやデッドリンクエリアに指定できます。 img要素のusemap属性の値 と map要素のname属性の値 を同じイメージマップ名にすることで、イメージとイメージマップを関連付けます。
map要素のname属性は、必須属性です。 name属性は、usemap属性から参照するイメージマップの名前を指定します。 name属性の値は、ホワイトスペースを含まない空ではない値であり、 かつ、他のmap要素のname属性の値とは異なる一意の値である必要があります。
name属性とid属性を同時に指定する場合は、どちらも同じ値を持つ必要があります。
以下のサンプルは、ページ上部にイメージマップがあり、ページ下部に対応するテキストリンクがある使用例です。 イメージ部分とマップ部分を分けて記述できるので、メンテナンスしやすい利点があります。
<header>
<img src="./sample/map_navigation.png" alt="メニュー" usemap="#navigation">
</header>
...
<footer>
<map name="navigation">
<p>
<a href="/clothes/">衣料品</a>
<area alt="衣料品" coords="0,0,151,111" href="/clothes/"> |
<a href="/toys/">おもちゃ</a>
<area alt="おもちゃ" coords="150,0,300,111" href="/toys/"> |
<a href="/food/">食品</a>
<area alt="食品" coords="0,0,151,222" href="/food/"> |
<a href="/books/">本</a>
<area alt="本" coords="150,0,300,222" href="/books/">
</p>
</map>
</footer>
以下のサンプルは、色付きの領域だけをクリックできるようにしています。 中空の赤い長方形については、中空部分をhref属性が存在しないarea要素として指定することでデッドリンクエリアにしています。
<p>
<img src="./sample/sample-usemap.png" usemap="#shapes" alt="中空の赤い長方形、緑の円、青い三角形、黄色い四芒星">
<map name="shapes">
<area shape="rect" coords="50,50,100,100"> <!-- 中空部分:href属性が存在しない点に注意 -->
<area shape="rect" coords="25,25,125,125" href="red.html" alt="赤い長方形">
<area shape="circle" coords="200,75,50" href="green.html" alt="緑の円">
<area shape="poly" coords="325,25,262,125,388,125" href="blue.html" alt="青い三角形">
<area shape="poly" coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60" href="yellow.html" alt="黄色い四芒星">
</map>
</p>
尚、map要素とarea要素で作成するイメージマップは、ドキュメント中の複数のimg要素に関連付けることができます。 そのため、1つのarea要素で指定したエリアは、ドキュメント中の複数のエリアに対応する可能性があります。
以下のサンプルは、img要素のみでmap要素やarea要素はありませんが、 usemap="#shapes"と上のサンプルと同じイメージマップ名を指定しているため、上の表示例と同様にリンク領域が有効になっています。
<p>
<img src="./sample/sample-usemap.png" usemap="#shapes" alt="中空の赤い長方形、緑の円、青い三角形、黄色い四芒星">
</p>