HTML <map> element

クリッカブルマップを作成します。クリッカブルマップとは、クリックするとジャンプできる領域を複数埋め込んだ画像のことです。MAPタグはクリッカブルマップの枠を作成するだけなので、実際のクリック可能領域は <AREA> タグで配置します。

書式

HTMLはタグ名、属性名及び属性値の大文字と小文字を区別しない。

<map> 
  <!-- transparent -->
</map>

内容モデル

ひとつ以上のブロック要素またはAREA要素

属性

属性は全て省略可能です。

name
img要素のusemap属性によって参照される名前

JavaScript

JavaScriptからは HTMLMapElement インタフェースを通じてmap要素へアクセスできる。

dir
map要素のdir属性 
let dir = document.getElementById('map1').dir
id
map要素のid属性 
let id = document.getElementById('map1').id
innerText
map要素に含まれるテキスト 
let innerText = document.getElementById('map1').innerText
lang
map要素のlang属性 
let lang = document.getElementById('map1').lang
name
map要素のname属性 
let name = document.getElementById('map1').name
title
map要素のtitle属性 
let title = document.getElementById('map1').title

<AREA>

<AREA> はクリッカブルマップの中にクリック可能領域を配置するHTMLタグです。<MAP> と </MAP> の間に記述します。

書式

<AREA [attribute=value ...] content-model </AREA>

HTMLでは終了タグを省略できます。XHTMLでは終了タグを省略できないので <area/> のように記述します。AREA 要素タイプは内容モデルを持ちません。つまり、開始タグと終了タグの間には何も現れません。開始タグに続いて終了タグが現れるだけです。

属性

alt 属性は必須で省略できません。その他の属性は省略可能です。

shape
クリック可能な領域の形状を次の属性値の中から指定します。
shape属性
属性値意味
rect矩形
circle円形
poly多角形
defaultデフォルト
coords
リンク領域の座標指定形式を次の属性値の中から指定します。
coords属性
属性値意味
rect左上の座標 (x1, y1) と 右下の座標 (x2, y2) を x1,y1,x2,y2 の形式で指定（規定値）
circle円の中心の座標 (x, y) と 円の半径 (r) を x,y,r の形式で指定
poly各辺の座標を指定
href
クリックされたらジャンプする先のURL
alt
代替テキスト（必須属性）
nohref
どこにもジャンプしない
hreflang
ジャンプ先の言語
rel
このドキュメントからみたリンク先のドキュメントとの関係
rev
リンク先のドキュメントからみたこのドキュメントとの関係
target
リンク先のページを開くときに現在のウィンドウを使うか、新しいウィンドウを開くかを指定します。省略した場合は、現在のウィンドウを使います。
target属性
属性地説明
_blank新しいウィンドウを開きます
_self現在のウィンドウを使います
_topフレーム分割している場合、フレームを解除して現在のウィンドウを使います
名前指定した名前のフレームを使います

DTD

使用例と表示サンプル

クリッカブル・マップ (client-side image map) の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<p><img src="map.png" usemap="#map1"></p>
<map name="map1">
  <area coords="11,25,99,63" href="img.html" alt="img要素">
  <area shape="circle" coords="168,42,33" href="map.html" alt="map要素">
  <area shape="poly" coords="268,9,229,66,308,66" href="#area" alt="area要素">
</map>

clickable map

img要素 map要素 area要素

参考文献

Web Hypertext Application Technology Working Group (2022) "The map element" HTML Living Standard