map要素

説明

<map name="...">-</map>　開始タグ:必須終了タグ:必須

1つのイメージ上のクリックする場所によって別のリンク先に移動する機能をクリッカブルマップと呼びます。クリッカブルマップにはサーバサイドとクライアントサイドの2種類がありますが、クライアントサイドを定義するのがmap要素です。

map要素は、クライアント側のイメージマップのリンク領域(ホットスポット)の位置とリンクを定義するarea要素のコンテナです。map要素の主な目的は、img要素をクライアント側のイメージマップにするときに、img要素のusemap属性が示す識別子とmap要素のname属性が示す識別子を関連付けることです。

HTML4.0からリンク領域(ホットスポット)の位置とリンクを定義する要素にa要素が追加され、usemap属性を持つ要素にobject要素とinput要素が追加されました。この仕様にNetscapeは対応していますが、IEは対応していないので注意が必要です。

属性 (W3C)

<map

H3- ie1- N2-

一般属性	id class style title lang dir %events;
name="名前"	H3-x1 ie1- N2- [必須] イメージマップ名

>((%block;)|area)+</map>

使用例


<img src="img/map1.gif" alt="map" width="240" height="80" border="0" usemap="#m1">

<map name="m1">

  <area shape="rect" coords="10,10,70,70" href="anchor2.htm" alt="rect">

  <area shape="circle" coords="120,40,30" href="anchor2.htm" alt="circle">

  <area shape="poly" coords="196,9,171,31,179,66,213,70,227,33" href="anchor2.htm" alt="pentagon">

</map>

img要素の属性値usemap="URI"より仕様書では、他文書中のイメージマップを利用できることになっていますが、実際には同一文書内のものしか利用できません。従って、#記号を頭につけた属性値での指定となります。

ページ内リンク


<img src="img/map2.gif" alt="map2" width="240" height="80" border="0" usemap="#m2">

<map name="m2">

  <area shape="rect" coords="10,10,70,70" href="anchor2.htm#sec1" alt="rect">

  <area shape="circle" coords="120,39,30" href="anchor2.htm#sec2" alt="circle">

  <area shape="poly" coords="194,10,171,32,180,66,213,69,228,34,195,10" href="anchor2.htm#sec3" alt="pentagon">

</map>

↓


<a name="sec1">section1</a>

<a name="sec2">section2</a>

<div id="sec3">section3</div>

HTML4.0仕様書によるマッピング

HTML4.0から定義されたa要素のshape属性およびcoords属性、object要素とinput要素のusemap属性を使用した際に記述されるであろうマーク付けは以下のようなものになります。Netscapeは対応していますが、IEでは対応していません。

#記号を頭につけたusemap属性の値と、map要素のname属性の値を関連付けます。

object要素によるイメージマップ

H4- N6-


<div>

<object data="map1.gif" usemap="#m1" type="image/gif" width="240" height="80">

<map name="m1">

  <p>

    <a href="anchor1.htm" shape="rect" coords="10,10,70,70">四角</a> |

    <a href="anchor2.htm" shape="circle" coords="120,40,30">円形</a> |

    <a href="anchor3.htm" shape="poly" coords="196,9,171,31,179,66,213,70,227,33">五角形</a>

  </p>

</map>

</object>

</div>

input要素によるイメージマップ

H4- N2-


<div>

<input type="image" src="map1.gif" usemap="#m2">

<map name="m2">

  <p>

    <a href="anchor1.htm" shape="rect" coords="10,10,70,70">四角</a> |

    <a href="anchor2.htm" shape="circle" coords="120,40,30">円形</a> |

    <a href="anchor3.htm" shape="poly" coords="196,9,171,31,179,66,213,70,227,33">五角形</a>

  </p>

</map>

</div>

map要素 イメージマップ (client-side image map)

説明

属性 (W3C)

使用例

ページ内リンク

HTML4.0仕様書によるマッピング

object要素によるイメージマップ

input要素によるイメージマップ

map要素イメージマップ (client-side image map)