map

提供: ASCII.jp HTMLリファレンス

ver.8~ ver.7~ ver.14~ ver.5.1~ ver.11.5~
意味 イメージマップ
読み方 マップ

カテゴリー

フロー・コンテンツ
フレージング・コンテンツのみを含む場合はフレージング・コンテンツ

親にできる要素/カテゴリー

フレージング・コンテンツのみを含む場合は、フレージング・コンテンツが期待される個所
それ以外はフロー・コンテンツが期待される個所

子にできる要素/カテゴリー

トランスペアレント

<map 属性="値">~</map>

属性 概要
name 文字列 イメージマップの名前

グローバル属性

accesskey,class,contenteditable,contextmenu,dir,draggable,hidden,id,lang,spellcheck,style,tabindex,title

説明

 map要素はarea要素と組み合わせて、イメージマップの定義に使います。

 name属性で、イメージマップに名前を付けます。他のmap要素のname属性と、値が重複しないようにする必要があります。

 なお、map要素の中に、一般のコンテンツを含めることもできます。そのコンテンツはそのまま出力されます。

サンプル

(body要素の内部のみ掲載)

<h1>map要素の例</h1>
<p>
<img src="map.png" alt="map要素用の図" usemap="#points">
</p>
<map name="points">
<area shape="rect" coords="0,0,150,100" alt="赤" title="赤" href="red.html">
<area shape="rect" coords="150,0,300,100" alt="青" title="青" href="blue.html">
<area shape="rect" coords="0,100,150,200" alt="黄" title="黄" href="yellow.html">
<area shape="rect" coords="150,100,300,200" alt="緑" title="緑" href="green.html">
</map>

サンプル実行画像

 赤の部分をマウスでポイントした場合

 緑の部分をマウスでポイントした場合

よくある間違い、勘違い

 id属性を指定する場合、その値をname属性の値と同じにする必要があります。

Powered by Web Professional

目次