<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種類の要素で構成されています。
-
まず、イメージマップに使用する画像を用意して、それをimg要素で埋め込みます。
<img src="menu.gif" alt="メニュー">
-
map要素に
name=""
を追加して、任意のマップ名を指定します。次の例ではmap
という名前を指定しています。(他のマップ名と重複しないようにします)<img src="menu.gif" alt="メニュー"> <map name="map"></map>
-
img要素に
usemap=""
を追加して、2. で指定したマップ名をハッシュ(#
)に続けて記述します。(このマップ名によって、画像とマップ定義が関連付けられることになります)<img src="menu.gif" alt="メニュー" usemap="#map"> <map name="map"></map>
-
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>