<map>タグ
<map>タグの機能と属性
機能 |
イメージマップの仕様を定義する |
属性 |
HTML-4.01 |
コア 言語 イベント name |
XHTML-1.0 |
言語 イベント id class style title name |
備考 |
XHTML2では廃止になっている
|
<map>タグはイメージマップを定義します。イメージマップとは、1つの画像の中で複数のリンク先を指定するためのものです。1つの画像を分割して、それぞれにリンク先を割り当てたような表現が可能です。
イメージマップを使用するには、
- <img>で画像を配置
- <map>で配置した画像にイメージマップを定義
- <area>でイメージマップのリンクを定義
という流れになります。そのため、<map>タグは<img>および、<area>とセットで使用されます。<map>は<area>をネストして使用します。
<map>にネストされるタグ
タグ名 |
機能 |
詳細 |
<area> |
イメージマップのリンクを定義 |
詳細 |
name属性
name属性には、<img>タグから参照される名前を指定します。通常、イメージマップを使用する場合、<img>タグのusemap属性に参照する<map>タグを#の付いた形で指定するので、#を除いた部分を記述することになります。
次の例は同一ページ内でリンクさせた例です。<area>タグについての詳細は、<area>タグを参照してください。
map.html
<html>
<head>
<title>イメージマップの例</title>
</head>
<body>
<p>A〜Fのどれかをクリックしてください。
</p>
<img src="/images/example/map_sample.gif" alt="選択用画像" usemap="#map" />
<map name="map">
<area coords="0,0, 199,199" href="#a" />
<area coords="200,0, 399,199" href="#b" />
<area coords="0,200, 199,399" href="#c" />
<area coords="200,200, 399,399" href="#d" />
<area coords="0,400, 199,599" href="#e" />
<area coords="200,400, 399,599" href="#f" />
</map>
<p id="a">Aがクリックされました。
</p>
<br /><!--ダミーの余白-->
<br /><!--ダミーの余白-->
<br /><!--ダミーの余白-->
<p id="b">Bがクリックされました。
</p>
<br /><!--ダミーの余白-->
<br /><!--ダミーの余白-->
<br /><!--ダミーの余白-->
<p id="c">Cがクリックされました。
</p>
<br /><!--ダミーの余白-->
<br /><!--ダミーの余白-->
<br /><!--ダミーの余白-->
<p id="d">Dがクリックされました。
</p>
<br /><!--ダミーの余白-->
<br /><!--ダミーの余白-->
<br /><!--ダミーの余白-->
<p id="e">Eがクリックされました。
</p>
<br /><!--ダミーの余白-->
<br /><!--ダミーの余白-->
<br /><!--ダミーの余白-->
<p id="f">Fがクリックされました。
</p>
<br /><!--ダミーの余白-->
<br /><!--ダミーの余白-->
<br /><!--ダミーの余白-->
<br /><!--ダミーの余白-->
<br /><!--ダミーの余白-->
<br /><!--ダミーの余白-->
<br /><!--ダミーの余白-->
<br /><!--ダミーの余白-->
<br /><!--ダミーの余白-->
<br /><!--ダミーの余白-->
<br /><!--ダミーの余白-->
<br /><!--ダミーの余白-->
<br /><!--ダミーの余白-->
<br /><!--ダミーの余白-->
<br /><!--ダミーの余白-->
<br /><!--ダミーの余白-->
<br /><!--ダミーの余白-->
<br /><!--ダミーの余白-->
<br /><!--ダミーの余白-->
<br /><!--ダミーの余白-->
<br /><!--ダミーの余白-->
<br /><!--ダミーの余白-->
<br /><!--ダミーの余白-->
<br /><!--ダミーの余白-->
<br /><!--ダミーの余白-->
</body>
</html>
id属性、class属性、style属性、title属性
共通して使用される属性を参照してください。