イメージマップを定義する

map要素は、クライアントサイド・イメージマップを定義します。

• イメージマップは、クリッカブルマップと呼ばれることもあります。

イメージマップを使用することで、1つの画像内に複数のリンク領域を設定できるようになります。

次の例では、四角、丸、三角の図形と、それ以外の領域の部分にリンクが設定されています。

• 古いブラウザでは、それ以外の領域に設定されたリンクが機能しない場合があります。

イメージマップ作成の流れ

イメージマップは、画像を埋め込むimg要素、マップを定義するmap要素、リンク領域を設定するarea要素、この3種類の要素で構成されています。

1. まず、イメージマップに使用する画像を用意して、それをimg要素で埋め込みます。

   <img src="menu.gif" alt="メニュー">
   

2. map要素に name="" を追加して、任意のマップ名を指定します。次の例では map という名前を指定しています。（他のマップ名と重複しないようにします）

   <img src="menu.gif" alt="メニュー">
   
   <map name="map"></map>
   

3. img要素に usemap="" を追加して、2. で指定したマップ名をハッシュ（ # ）に続けて記述します。（このマップ名によって、画像とマップ定義が関連付けられることになります）

   <img src="menu.gif" alt="メニュー" usemap="#map">
   
   <map name="map"></map>
   

4. map要素の中にarea要素を配置して、リンク領域の設定を行います。次の例では、3つのリンク領域を設定しています。

   <img src="menu.gif" alt="メニュー" usemap="#map">
   
   <map name="map">
   <area shape="rect" coords="0,0,149,30" href="index.html" alt="ホーム">
   <area shape="rect" coords="150,0,299,30" href="html.html" alt="HTMLリファレンス">
   <area shape="rect" coords="300,0,449,30" href="css.html" alt="CSSリファレンス">
   </map>
   

リンク領域の設定方法については、下記のページを参考にしてください。

• イメージマップのリンク領域を設定する

map要素の内容について

map要素の中には、area要素だけでなく一般のコンテンツも配置することができます。

次の例では、イメージマップが設定された画像の下に、テキストによるリンクメニューが表示されることになります。（イメージマップが利用できる環境であっても表示されます）

<p><img src="map.gif" alt="サンプル" usemap="#example" width="500" height="200"></p>

<map name="example">

<area shape="rect" coords="50,50,150,150" href="map1.html" alt="四角">
<area shape="circle" coords="250,100,50" href="map2.html" alt="丸">
<area shape="poly" coords="400,50,450,150,350,150" href="map3.html" alt="三角">
<area shape="default" href="map4.html" alt="その他の領域">

<ul>
<li><a href="map1.html">四角</a></li>
<li><a href="map2.html">丸</a></li>
<li><a href="map3.html">三角</a></li>
<li><a href="map4.html">その他の領域</a></li>
</ul>

</map>

• map要素は、親要素のコンテンツ・モデルを継承します（トランスペアレント）。そのため、親要素の種類によっては、map要素内に配置できない要素もあるので注意が必要です。