map 要素 （HTMLタグ）

HTMLのmap要素の説明です。map要素は、イメージマップを定義する要素です。イメージマップとは、1つの画像の中に複数のリンク領域を定義することができるものです。

---

目次

1. 要素の記述例
   • 閲覧中ブラウザーでの表示結果
2. 要素の説明
3. 利用できる属性
   • グローバル属性
   • イベントハンドラ属性
4. ブラウザデフォルトCSS設定
   • Google Chromeの場合

要素の記述例

<img src="img/cloud-server.png" usemap="#navigation" alt="クラウド">
<map name="navigation">
  <area shape="rect" coords="70,14,192,94"    href="#" alt="cloud"   title="This is cloud.">
  <area shape="rect" coords="14,171,68,254"   href="#" alt="server1" title="This is server1.">
  <area shape="rect" coords="104,171,156,254" href="#" alt="server2" title="This is server2.">
  <area shape="rect" coords="192,171,244,254" href="#" alt="server3" title="This is server3.">
</map>

 

閲覧中ブラウザーでの表示結果

 

要素の説明

• map要素は、イメージマップを定義する要素です。イメージマップとは、1つの画像の中に複数のリンク領域を定義することができるものです。
• map要素内にリンクを用意する場合は、area要素を利用します。
• map要素のname属性でイメージマップの名前を付与し、img要素のusemap属性に定義することでイメージマップと画像を関連付けることができます。
• map要素のname属性でイメージマップの名前は、同じHTML文書内で同じ名前を使ってはいけません。

 

利用できる属性

map要素で利用できる属性

属性名	属性の説明
name	イメージマップの名前を定義します。

グローバル属性

HTMLのすべての要素はグローバル属性が利用できます。グローバル属性の一覧については「グローバル属性」を参照してください。

イベントハンドラ属性

map要素がサポートするイベントハンドラ属性については「イベントハンドラ属性」を参照してください。

ブラウザデフォルトCSS設定

Google Chromeの場合

map {
  display: inline;
}