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

　map要素は「client-side image map」の略で、area要素やa要素を内包し埋め込まれてる画像にクライアント側イメージマップを作成します。しかし、a要素はInternet Explorer 6/7で無効となっているので、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参照
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要素


TechTargetジャパン

リッチクライアント & 帳票 フォーラム 新着記事

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

- PR -
＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH