HTML <map> タグ

定義と使用法

<map> タグを使用してイメージマップを定義する必要があります。イメージマップ（イメージマップ、分断ナビゲーション図）は、クリック可能なエリアを持つイメージです。

<map> 要素には name 属性、この属性は <img> 要素 の usemap 属性 関連付けられて、イメージとマップの関係を構成します。

<map> 要素はいくつか <area> 要素、イメージマップ内のクリック可能なエリアを定義します。

も参照してください：

HTML DOM リファレンスマニュアル：マップオブジェクト

例

例1

クリック可能なエリアを持つイメージマップ：

<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Coffee" href="coffee.html">
</map>

実際に試してみる

例2

クリック可能なエリアを持つ別のイメージマップ：

<img src="solarsystem.png" width="1024" height="576" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,114,576" alt="Sun" href="sun.html">
  <area shape="circle" coords="190,230,5" alt="Mercury" href="mercury.html">
  <area shape="circle" coords="228,230,5" alt="Venus" href="venus.html">
</map>

実際に試してみる

属性

属性 値 説明
name マップ名 必須。画像マップの名前を指定します。

グローバル属性

<map> タグは、以下のイベント属性をサポートしています HTML でのグローバル属性。

イベント属性

<map> タグは、以下のイベント属性をサポートしています HTML でのイベント属性。

デフォルトの CSS 設定

ほとんどのブラウザは以下のデフォルト値を表示します <map> 要素：

map {
  display: inline;
}

ブラウザのサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート