クリック可能な領域を持つイメージマップ：
<img src="planets.gif"
width="145" height="126"
alt="Planets"
usemap="#planetmap">
<map
name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
Try it Yourself ❯
<map> タグは、クライアントサイドのイメージマップを定義するために使用します。 イメージマップは、クリック可能な領域を持つ画像です。
<map> 要素における必須な name 属性は、<img>の usemap 属性に連携して、画像とマップとの間の関係を作ります。
<map> 要素には、イメージマップ内のクリック可能なエリアを定義する、 多数の <area> 要素が含まれます。
| 要素 | |||||
|---|---|---|---|---|---|
| <map> | Yes | Yes | Yes | Yes | Yes |
注: HTML5 では、 <map> タグに id 属性も指定する場合は、name 属性と同じ値でなければなりません。
XHTMLでは、name 属性は非推奨で、削除されました。代わりにglobal id 属性を使用してください。
| 属性 | 値 | 説明 |
|---|---|---|
| name | mapname | 必須。イメージマップの名前を指定します |
<map> タグは、HTML のグローバル属性もサポートします。
<map> タグは、HTML のイベント属性もサポートします。
HTML DOM リファレンス：Map オブジェクト
ほとんどのブラウザは、次のデフォルト値を使用して <map> 要素を表示しています：
map {
display: inline;
}