<map>イメージマップの作成

<map>タグは、area要素と組み合わせる事で、イメージマップを作成することができます。

例えば<img><object>で表示したコンテンツの特定領域を指定し、その特定領域をハイパーリンク先として指定することなどができます。

イメージマップを作成するにはmap要素内にarea要素を配置し、area要素のhref属性でリンク先urlを、shape属性でリンク領域の形状を、coords属性でそのリンク領域の座標を設定します。 またmap要素要素にはname属性が必須となります。 name属性で任意の名前を指定し、関連付けるimg要素やobject要素のusemap属性の値と一致させる事で、イメージマップや画像、外部リソースなどを結びつけることができます。

ただし他のmap要素のname属性の値と重複しないようにして下さい。 またname属性と同時にid属性を指定する場合は、name属性とid属性の値を同じにする必要があります。

なおmap要素内には、他の一般コンテンツも含める事ができ、含めたコンテンツはそのまま出力されます。

HTML5での変更点

HTML5のmap要素では、リンク領域の設定をa要素で行うことができなくなり、area要素のみで行うようになりました。 またinput要素との関連付けもできなくなりました。

HTML5.1の場合は、object要素と関連付けることはできません。

書式

  • <map 属性="値">~</map> ……… イメージマップを作成する

属性

name="" イメージマップと関連付ける名前を指定

使用した時の例

<img src="/map.jpg" width="690" height="150" usemap="#mapname" alt="イメージマップ表示例">
<map name="mapname">
<area shape="rect" coords="40,34,170,106" href="/hp-web/" alt="四角形">
<area shape="circle" coords="342,64,51" href="/hp-web/html-taglist/" alt="円形">
<area shape="poly" coords="532,28,639,70,536,108" href="https://www.yuu-diaryblog.com/" alt="三角形">
</map>

ブラウザ上の表示例

イメージマップ表示例 四角形 円形 三角形

対応ブラウザなどのデータ

形式 <map name="">~</map> カテゴリ フローコンテンツ, フレージングコンテンツ, パルパブルコンテンツ
親要素 フレージングコンテンツが期待される場所 子要素 トランスペアレント
開始タグ 必須 終了タグ 必須
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer8~ , Google Chrome14~ , Firefox7~ , Opera11.5~ , Safari5.1~