map要素 -- イメージマップ

基本データ

map要素
文書型 適用 子要素 開始タグ 終了タグ 分類
Strict ○ ブロックレベル要素 area要素 必須 必須 インライン要素
Transitional ○
Frameset ○

属性

固有属性

name="名前"(必須)
Strict: ○ | Transitional: ○ | Frameset: ○
イメージマップに名前をつけます。この属性は必ず指定しなければいけません。この値をobject要素やimg要素のusemap属性に指定することで、イメージマップとオブジェクトを関連付けます。

解説

イメージマップとは

画像やオブジェクトの特定部分をクリックするなどの操作をしたとき、特定の動作を行わせる仕組みをイメージマップと言います。例えば、日本地図の画像の中で東京の部分をクリックしたら、東京の地図の画像が表示されるといった具合です。イメージマップにはサーバ側・イメージマップとクライアント側・イメージマップの2種類があります。

クライアント側・イメージマップ
クライアント側・イメージマップとは、どの領域をクリックしたときにブラウザがどんな動作をするかを、map要素を使いHTML中で定義する方式です。
サーバ側・イメージマップ

サーバ側・イメージマップとは、画像をクリックしたときのマウスポインタの座標をCGIに送信する方式です。詳細はサーバ側・イメージマップを参照してください。

クライアント側・イメージマップ

map要素はクライアント側・イメージマップを定義するための要素です。この要素の中にarea要素かa要素を含むブロックレベル要素を配置して、画像やオブジェクトの座標とリンクするURIを指定します。map要素にはname属性を記述し、イメージマップに名前をつけます。そしてその名前をimg要素やobject要素やinput要素のusemap属性で指定します。

<img … usemap="#map1">
<map name="map1">
ここにarea要素を配置するか、a要素を含むブロックレベル要素を配置する。
</map>

画像の表示にimg要素を使うかobject要素を使うか、map要素の中にa要素を使うかarea要素を使うかで、ブラウザの動作が異なります。

img要素 + map要素の中にarea要素
map要素の中にarea要素を配置した場合、area要素の内容はブラウザに表示されません。(area要素は空要素だからです。)そのため、area要素にはalt属性で代替文字列を指定しなければいけません。 
<p>
  <img src="menus.png" alt="メニュー" usemap="#map1">
  <map name="map1">
    <area href="dummy1.html" alt="Menu1" shape="circle" coords="50,50,50">
    <area href="dummy2.html" alt="Menu2" shape="rect" coords="100,0,200,100">
    <area href="dummy3.html" alt="Menu3" shape="poly" coords="200,0,250,100,300,0,200,0">
  </map>
</p>

メニュー Menu1 Menu2 Menu3

object要素の中にmap要素 + map要素の中にa要素
object要素の中にmap要素を配置し、その中にa要素を配置しても同じことができます。HTML 4に対応したブラウザであれば、まずobject要素で指定された画像を表示しようと試みます。画像を表示できればobject要素の中身は表示されず、画像を表示できなければobject要素の中身(a要素による文字列のリンク)が表示されます。 
<p>
  <object data="menus.png" type="image/png" usemap="#map2">
    <map name="map2">
      <p>Navigate the site:
        <a href="dummy1.html" shape="circle" coords="50,50,50">Menu1</a>
        <a href="dummy2.html" shape="rect" coords="100,0,200,100">Menu2</a>
        <a href="dummy3.html" shape="poly" coords="200,0,250,100,300,0,200,0">Menu3</a>
      </p>
    </map>
  </object>
</p>

Navigate the site: Menu1 Menu2 Menu3

map要素やarea要素に対応していないブラウザでもa要素によるリンクが表示されるので、1番目の方法よりもアクセシブルなはずなのですが、残念ながらInternet Explorerはobject要素やa要素のshape属性・coords属性に対応していません。

object要素の外にmap要素 + map要素の中にa要素
object要素の外にmap要素を配置した場合、object要素で指定された画像が表示できてもできなくても、object要素の外にあるmap要素の中身が表示されます。object要素に対応したブラウザであれば画像と文字列のリンクの両方が表示され、画像が表示できないブラウザでは文字列のリンクのみが表示されます。 
<p>
  <object data="menus.png" type="image/png" usemap="#map3"></object>
  <map name="map3">
    <p>Navigate the site:
      <a href="dummy1.html" shape="circle" coords="50,50,50">Menu1</a>
      <a href="dummy2.html" shape="rect" coords="100,0,200,100">Menu2</a>
      <a href="dummy3.html" shape="poly" coords="200,0,250,100,300,0,200,0">Menu3</a>
    </p>
  </map>
</p>

Navigate the site: Menu1 Menu2 Menu3

Internet Explorerはobject要素に対応していないため、文字列によるリンクのみが表示されます。

HTML 4.01ではmap要素の中にはarea要素とa要素を混在させることもできますが、その場合はarea要素が無視されることになっています。

XHTML 1.0ではarea要素とa要素を混在させることができなくなっています。HTML 4.01でも両者を混在させて使わないほうがよいでしょう。

Strict DTDの定義

<!ELEMENT MAP - - ((%block;) | AREA)+ -- client-side image map -->
<!ATTLIST MAP
  %attrs;                              -- %coreattrs, %i18n, %events --
  name        CDATA          #REQUIRED -- for reference by usemap --
  >

Information

現在の位置