クライアント側イメージマップを作成するmap要素
<map>……</map>

　map要素は「client-side image map」の略で、area要素やa要素を内包し埋め込まれてる画像にクライアント側イメージマップを作成します。しかし、a要素はInternet Explorer 6/7で無効となっているので、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参照
id	任意の ID名	要素を識別するために固有の ID名を付ける	`<map name="map" id="map"></map>`	`[window.]document.getElementById（"【ID属性値名】"）.id`
class	任意のクラス名	id属性と異なり、同じクラス名を何度でも用いることができる	`<map name="map" class="map"></map>`	`[window.]document.getElementById（"【ID属性値名】"）.class`
style	スタイルシートの記述	要素に対して直接スタイルを適用させる	`<map name="map" style="width=;100px;"></map>`	`[window.]document.getElementById（"【ID属性値名】"）.style`
title	任意の文字列	要素に対して補足情報を付け足す	`<map name="map" title="map"></map>`	`[window.]document.getElementById（"【ID属性値名】"）.title`
name	任意の名前	クライアント側イメージマップに名前を指定	`<map name="map" id="map"></map>`	`[window.]document.getElementById（"【ID属性値名】"）.name`

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

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

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

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

5/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データの選択、挿入、削除、コピー、移動、ソートに使うメソッドの使い方などを解説する