reflux flow > HTML/XHTMLリファレンス > HTML/XHTML map要素

map要素

このページの目次

1. 概要
2. 要素の内容
3. 属性
4. 説明
5. 関連要素

公開日

2006-02-05

最終更新日

2008-09-15T14:38:19+09:00

概要

map要素はクライアントサイド・イメージマップを定義するための要素です。

要素の内容

ブロックレベル要素とarea要素を子要素として記述することができます。ただし、一つ以上の要素を含む必要があります。また、XHTML1.0ではブロックレベル要素とarea要素を混在させることはできません。

属性

固有属性

汎用属性

id（XHTMLでは必須）, class, title, lang（xml:lang）, dir, style, xmlns（XHTML1.1のみ）

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

説明

map要素はクライアントサイド・イメージマップを定義するための要素です。イメージマップにおいてクリックできる領域は、map要素内のarea要素またはa要素で定義します。オブジェクト（object要素、img要素など）のusemap属性にmap要素の名前（HTMLの場合はname属性、XHTMLの場合はid属性）を指定することでオブジェクトとイメージマップを関連付けます。

area要素を用いたイメージマップ

<!-- 例 -->
<p>
  <img src="image.png" alt="" usemap="#imagemap" />
  <map name="imagemap" id="imagemap">
    <area href="item1.html" shape="circle" coords="30, 30, 10" alt="項目1" />
    <area href="item2.html" shape="circle" coords="60, 30, 10" alt="項目2" />
    <area href="item3.html" shape="circle" coords="90, 30, 10" alt="項目3" />
  </map>
</p>

a要素を用いたイメージマップ

<!-- 例 -->
<p>
  <img src="image.png" alt="" usemap="#imagemap" />
  <map name="imagemap" id="imagemap">
    <p>
      <a href="item1.html" shape="circle" coords="30, 30, 10">項目1</a>, 
      <a href="item2.html" shape="circle" coords="60, 30, 10">項目2</a>, 
      <a href="item3.html" shape="circle" coords="90, 30, 10">項目3</a>
    </p>
  </map>
</p>

area要素を用いた場合と異なり、map要素の内容がそのまま代替内容になります。ですから、イメージマップ関連のタグと属性が無視されても代替内容を利用することができます。このようにa要素を用いた方がクライアントサイド・イメージマップに対応していないブラウザに優しいと言えます。ただし、area要素によるイメージマップに対応しているブラウザでも、a要素によるイメージマップには対応していない場合があります。

XHTML1.1のusemap属性

XHTML1.1ではusemap属性の値がURIからIDREFに変更されました。HTML4.01やXHTML1.0ではusemap="#id"のようにURIとして記述しますが、XHTML1.1ではusemap="id"のようにid属性値をそのまま記述します。ただし、HTMLのレンダリングを目的とした従来のブラウザでは正常に機能しない可能性があります。

関連要素

• area要素
• a要素