イメージマップを定義した場所とリンク先を指定するarea要素
<area>……</area>

 area要素は「client-side image map area」の略で、map内にクライアント側イメージマップの定義した場所のリンク先を指定します。area要素で指定していない領域には、マウスは反応しません。

 インライン要素として機能しますが、終了タグはなく空要素として存在します。

サンプル map map

<html>
<head>
<title>map要素のサンプル</title>
</head>
<body>

<p>
<img src="sample.png" width="376" height="50" alt="サンプル" usemap="#map" />
<map name="map">
<area coords="80,30,193,22" href="/fwcr/design/tag/index.html" shape="rect" alt="map">
<area coords="39,30,20,22" href="/fwcr/design/index.html" shape="rect" alt="map">
</map>
</p>

</body>
</html>

DOMでの参照方法

[window.]document.getElementById("【ID属性値名】")
[window.]document.images[i]

オプション属性

属性 機能 入力例 DOM参照
shape "defalut"
"rect" "circle"
"poly"
領域の形状
を指定
<area coords="80,82,93,92" shape="rect" href="example1.html"> [window.]document.getElementById("【ID属性値名】").shape
coords 座標値(※1 クライアント側
イメージマップ
の有効範囲となる
領域の座標を指定
<area coords="80,82,93,92" shape="rect" href="example1.html"> [window.]document.getElementById("【ID属性値名】").coords
href URI リンク先を指定 <area coords="80,82,93,92" shape="rect" href="example1.html"> [window.]document.getElementById("【ID属性値名】").href
nohref "nohref" リンク先がない
ことを示す
<area coords="80,82,93,92" shape="rect" nohref="nohref"> [window.]document.getElementById("【ID属性値名】").nohref
alt
(必須属性)
代替テキスト 画像が表示できない
ときや音声ブラウザ
の代替情報となる
テキストを指定
<area coords="80,82,93,92" shape="rect"
  href="example1.html" alt="map">
[window.]document.getElementById("【ID属性値名】").alt
  • ※1:例えば、shape="rect"の場合、"左上X座標,左上Y座標,右下X座標,右下Y座標Z"となる

追加が可能なイベントハンドラ属性

onclick、ondblclick、onmousedown、onmouseup、onmouseover、onmousemove、onmouseout、onkeypress、onkeydown、onkeyup

有限会社タグパンダ
喜安 亮介

6/6  

 INDEX
Web標準HTMLタグリファレンス(6)
画像や動画をサイトに表示させる正しいXHTMLタグ
画像・動画
  img 画像を読み込むためのimg要素
  object 外部アセットを読み込むためのobject要素
  param パラメータを指定するparam要素
  map クライアント側イメージマップを作成するmap要素
area イメージマップを定義した場所とリンク先を指定するarea要素



HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)
- PR -

注目のテーマ

デザインハック 記事ランキング

本日 月間
ソリューションFLASH