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

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

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

例

サンプル

<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

HTMLタグリファレンスインデックス

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

6/6

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

HTML5 + UX フォーラム新着記事

GASで棒、円、折れ線など各種グラフを作成、変更、削除するための基本 （2017/7/12）
　資料を作る際に、「グラフ」は必要不可欠な存在だ。今回は、「グラフの新規作成」「グラフの変更」「グラフの削除」について解説する
GET／POSTでフォームから送信された値をPHPで受け取る「定義済みの変数」【更新】 （2017/7/10）
　HTMLのフォーム機能についておさらいし、get/postメソッドなどの内容を連想配列で格納するPHPの「定義済みの変数」の中身や、フォーム送信値の取り扱いにおける注意点について解説します【PHP 7.1含め2017年の情報に合うように更新】
PHPのfor文＆ループ脱出のbreak/スキップのcontinue【更新】 （2017/6/26）
　素数判定のロジックからbreak文やcontinue文の利点と使い方を解説。for文を使ったループ処理の基本とwhile文との違い、無限ループなども併せて紹介します【PHP 7.1含め2017年の情報に合うように更新】
Spreadsheetデータの選択、削除、挿入、コピー、移動、ソート （2017/6/12）
　Spreadsheetデータの選択、挿入、削除、コピー、移動、ソートに使うメソッドの使い方などを解説する