HTML4 や XHTML では、クライアントサイドイメージマップをよりアクセシブルにするために いままでの IMG 要素と AREA 要素を用いる方法以外に、 IMG 要素の変わりに OBJECT 要素、AREA 要素の変わりに A 要素を用いる方法が 使えるようになりました。
しかし、現在主要なブラウザでは対応していない事が多く、 逆にアクセシビリティが低下してしまうようです。
ここでは、それぞれの方法の記述の仕方と注意点、ブラウザの対応度などを説明します。
画像の表示に、IMG 要素、領域の定義に AREA 要素を用いる今までの方法です。
ほとんどのブラウザで対応していますが、
画像を表示できない場合やオフにしている時、または
イメージマップに対応していないブラウザなどで正しく利用できない可能性があります。
そのような場合でも利用できるようにするためには、
同様な内容のテキストリンクを準備する必要があります。
<p>
<img src="map.gif" width="240" height="120"
alt="コンテンツ"
usemap="#contentsMap" />
<map name="contentsMap" id="contentsMap">
<area shape="rect" coords="5,5,220,30"
href="../../index.html"
alt="WEB アーカイブス" />
<area shape="rect" coords="60,60,235,80"
href="../index.html"
alt="XHTML リファレンス" />
<area shape="rect" coords="60,90,235,110"
href="../../css_ref/index.html"
alt="CSS リファレンス" />
</map>
</p>
領域の定義に AREA 要素ではなく、A 要素を用いる方法です。
この方法の利点は、領域の定義とテキストリンクを一度に記述でき、 イメージマップを利用できない場合でもリンクが機能する点です。 ただし、この方法を正しく解釈できるブラウザは、Mozilla や、MacIE など、まだ少ないようです。
<div>
<p>
<img src="map.gif" width="240" height="120"
alt="コンテンツ"
usemap="#contentsMap2" />
</p>
<map name="contentsMap2" id="contentsMap2">
<p>
<a shape="rect" coords="5,5,220,30"
href="../../index.html">WEB アーカイブス</a> |
<a shape="rect" coords="60,60,235,80"
href="../index.html">XHTML リファレンス</a> |
<a shape="rect" coords="60,90,235,110"
href="../../css_ref/index.html">CSS リファレンス</a>
</p>
</map>
</div>
画像の表示に、IMG 要素ではなく、OBJECT 要素を用いる方法です。
OBJECT 要素は、データの内容が理解できない場合には内容を表示するようにできているため、 領域の定義部分を、OBJECT 要素の内容としています。 このため、画像が表示できない場合は、テキストリンクが表示されるようになります。
ただし、この方法も正しく解釈できるブラウザは、Mozilla や、MacIE など、まだ少ないようです。
<div>
<object data="map.gif" type="image/gif" width="240"
height="120"
usemap="#contentsMap3" />
<map name="contentsMap3" id="contentsMap3">
<p>
<a shape="rect"
coords="5,5,220,30"
href="../../index.html">WEB アーカイブス</a> |
<a shape="rect"
coords="60,60,235,80"
href="../index.html">XHTML リファレンス</a> |
<a shape="rect"
coords="60,90,235,110"
href="../../css_ref/index.html">CSS リファレンス</a>
</p>
</map>
</object>
</div>