目次に戻る

map要素：HTML Living Standard各要素別メモ

概要

カテゴリー
配置できる場所
内容モデル
  • Transparent
  • 必須とはされてないが、area要素を子孫に含むことが想定されている。
属性
  • グローバル属性
  • name→当該イメージマップの名前文字列。img要素のusemap属性の対象となる。必須。同一HTML文書内で同じ値をもつmap要素が複数あってはならない。
  • id属性が指定された場合は、id属性値とname属性値は一致しなければならない。
HTML構文におけるタグの省略
  • 省略不可。
WAI-ARIA
  • すべてのrole及びすべてのaria-*属性は指定不可。
意味・用法

usemap属性が指定されているimg要素と、子孫のarea要素とを組み合わせて、イメージマップを定義する。

アクセシビリティ関連

私見・補足

ユーザーエージェントがイメージマップに対応しており、かつ、イメージマップが正常にレンダリングされる場合においても、内容は普通にレンダリングされる。つまり、map要素の内容は、代替コンテンツではない。

img要素との関連付け方法は、map要素に内包するという形もあってよかったのではないかとも思う。

個人的には、area要素を必須としてないのが不思議だ。

area要素が存在しないどこにもリンクされてないイメージマップという無意味なものを作成することすら可能になっている。href属性のないa要素にならって、プレースホルダーとしてのイメージマップと解釈すべきなのだろうが。

また、map要素の中にarea要素はあるけど、map要素とimg要素が関連付けられていないという、イメージがないイメージマップも作成できる（当然、イメージマップとしては機能しないし、area要素も表示されないからリンク集としても機能しない）。

表示確認

ソース１

  <img src="./sample/map.gif" alt="mapサンプル" usemap="#map" width="570" height="153" />
  <map name="map">
    <area shape="rect" coords="0,0,570,77" href="0mokuji.html" alt="目次" />
    <area shape="rect" coords="0,78,570,153" href="0kyotu.html" alt="各要素にかかわる共通事項" />
  </map>
表示結果１
mapサンプル 目次 各要素にかかわる共通事項
ソース２：画像が存在しない場合

  <img src="./sample/nai.gif" alt="mapサンプル（画像なし）" title="nai.gifは存在しない" usemap="#map2" width="570" height="153" />
  <map name="map2">
    <area shape="rect" coords="0,0,570,77" href="0mokuji.html" alt="目次" />
    <area shape="rect" coords="0,78,570,153" href="0kyotu.html" alt="各要素にかかわる共通事項" />
  </map>
表示結果２
mapサンプル（画像なし） 目次 各要素にかかわる共通事項

画像が表示されない場合にarea要素のalt属性値が表示されないブラウザが少なくないようだ。

ソース３：map要素内にarea要素以外も配置

  <img src="./sample/map.gif" alt="mapサンプル" usemap="#map3" width="570" height="153" />
  <map name="map3">
  <div>
    <a href="0mokuji.html">目次へ</a>|
    <area shape="rect" coords="0,0,570,77" href="0mokuji.html" alt="目次" />
    <a href="0kyotu.html">各要素にかかわる共通事項へ</a>
    <area shape="rect" coords="0,78,570,153" href="0kyotu.html" alt="各要素にかかわる共通事項" />
  </div>
  </map>
表示結果３
mapサンプル

配置の仕方によってはarea要素によるリンクが効かなくなるブラウザもあるようだ。