<map name=""></map>

更新日
仕様 HTML Living Standard
分類 フロー・コンテンツ / フレージング・コンテンツ / パルパブル・コンテンツ
利用場所 フレージング・コンテンツが置ける場所
内容 トランスペアレント(親要素のコンテンツモデルを継承)

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

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

<img src="map.gif" alt="サンプル" usemap="#example">

<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="その他の領域">

</map>

属性
必須属性
name="" イメージマップの名前 文字列 固有のマップ名
  • 同時にid属性を指定する場合は、name属性id属性の値は同一である必要があります。

イメージマップを使用することで、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>
旧HTMLからの変更点
  • HTML5:リンク領域の設定はarea要素のみで行うようになりました。(a要素による設定が行えなくなりました)
  • HTML5:input要素と関連付けることができなくなりました。
  • HTML5.1:object要素と関連付けることができなくなりました。

使用例


<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="その他の領域">

</map>

表示例
サンプル
四角 丸 三角 その他の領域
  • 古いブラウザでは、shape="default" で設定されたリンクが機能しない場合があります。