Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

map 要素

HTML <map> 要素はイメージマップ (クリック可能なリンク領域) を定義するために、<area> 要素とともに使用します。

コンテンツカテゴリ フローコンテンツフレージングコンテンツ、パルパブルコンテンツ
許可された内容 トランスパレント要素
タグの省略 不可。開始と終了タグの両方が必要。
許可された親要素 フレージングコンテンツを受け入れるすべての要素
DOM インターフェイス HTMLMapElement

属性

この要素はグローバル属性を持ちます。

name
name 属性は、マップを参照可能にするための名前を与えます。この属性は指定しなければならず、値は空文字列ではなく空白文字を含まないものにしなければなりません。name 属性の値は、同一文書内の別の map 要素の name 属性の値と compatibility-caseless 方式で一致してはいけません。id 属性も指定した場合は、両方の属性の値を同一にしなければなりません。

<map name="example-map-1">
  <area shape="circle" coords="200,250,25" href="another.htm" />
  <area shape="default" />
</map>

仕様

仕様書 策定状況 コメント
WHATWG HTML Living Standard
<map> の定義
現行の標準  
HTML5
<map> の定義
勧告  
HTML 4.01 Specification
<map> の定義
勧告 最初の定義

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 1.0 1.0 (1.7 or earlier)[1]
5.0 (5.0)[2]
17.0 (17.0)[3]
(有) 1.0 1.0
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート 1.0 1.0 (1.0)[1]
5.0 (5.0)[2]
17.0 (17.0)[3]
(有) 1.0 1.0

[1] Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) より Quirks モードでマッチングを行うときに、空ではない map を優先するようにスキップしません。例えば、以下の HTML で考えてみましょう:

<map></map>
<map>
  <area shape="rect" coords="25,25,75,75" href="#fail">
</map>
<img usemap="#a" src="image.png">

[2] Gecko 5.0 より前は、<img> 要素は 2 番目の空でない map にマッチしました。現在は、空であっても 1 番目の map にマッチします。

[3] Firefox 17 より、<map> HTML 要素のデフォルトスタイルは display: block; ではなく display: inline; になりました。これは他のブラウザの動作と一致しており、また Quirks モードではすでにこのとおりでした。

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: yyss
 最終更新者: yyss,