<MAP>一つの画像上に複数のリンクを設定する

<MAP>タグではイメージマップ(クライアントサイド・イメージマップ)を作成する事ができます。

ここでいうイメージマップとは、画像の特定の領域がリンクになっているものの事をいいます。 また一つの画像上に複数のリンクを設定することも可能です。

なおこのページで説明するクライアントサイド・イメージマップは、ブラウザ側で全ての処理を実行するもので、HTMLだけで作成することができます。

まず<MAP name="マップ名">~</MAP>で、画像をクライアントサイド・イメージマップとして定義します。 そしてその定義部分(イメージマップ)に名前を付けます。<IMG src="画像url" usemap="#マップ名">のusemap属性に<MAP>のname属性で指定した名前を指定し、画像とイメージマップの定義を関連付けます。

あとは<AREA>タグで、<MAP>内でクリックに反応する領域とそのリンク先を設定すれば、画像がイメージマップとして機能するようになります。 リンク範囲などの設定方法について詳しくは<AREA>をご覧ください。

使用した時の例

<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="無料HP作成へ">
<area shape="circle" coords="342,64,51" href="/html-taglist/" alt="html">
<area shape="poly" coords="532,28,639,70,536,108" href="index.html" alt="top">
</map>

ブラウザ上の表示例

イメージマップ表示例 無料HP作成へ htmlタグリファレンス 安月給さよならへ

※各図形にリンクが貼られてます

書式

  • <img src="画像url" usemap="#名前" alt="代替テキスト"> ・・・・・・ 利用する画像
  • <map name="名前">~</map> ・・・・・・ 画像をイメージマップとして定義
  • <area shape="形状" coords="座標" href="url" alt="代替テキスト"> ・・・・・・ リンク領域など

属性

name="" imgなどのusemapに利用した名前を指定する事で、画像とイメージマップの定義を関連付ける

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

形式 <map name="">~</map> カテゴリ フローコンテンツ / フレージングコンテンツ / パルパブルコンテンツ
親要素 子要素にフレージングコンテンツを持てる要素 子要素 トランスペアレント
開始タグ 必須 終了タグ 必須
分類 img:インライン要素 / map:インライン要素 / area:インライン要素
汎用属性 accesskey / class / contenteditable / dir / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer2~ , Google Chrome1~ , Firefox1~ , Opera1~ , Safari1~

イメージマップの種類

イメージマップとは、一つの画像に複数のリンクを指定できる技術で、クリックした領域のリンクをブラウザが判別するクライアントサイドイメージマップ、クリックした領域の座標をcgiに送信し、判別などの処理をするサーバーサイドイメージマップの2種類があります。

cgiを必要としないクライアントサイドイメージマップは、画像が表示できないブラウザにも代替テキストなどによって対応可能です。 そういったことなどもあり、現在ではクライアントサイドイメージマップの利用が推奨されているようです。

HTML5での状況と関連情報

HTML5の場合、map要素にid属性を指定する場合は、name属性と同じ名前を指定する必要がある