クライアント側イメージマップを作成する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

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

5/6

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



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

注目のテーマ

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

本日 月間