目次に戻る

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

概要

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

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

アクセシビリティ関連

私見・補足

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

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

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

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

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

表示確認

ソース1

  <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>
  
表示結果1
mapサンプル 目次 各要素にかかわる共通事項
ソース2:画像が存在しない場合

  <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>
  
表示結果2
mapサンプル(画像なし) 目次 各要素にかかわる共通事項

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

IE6表示のスクリーンショット(表示結果2)
IE6表示:画像は表示されないが、設定された領域のリンクはリンクとして機能する

IE7からIE11も同様。

Opera 12表示のスクリーンショット(表示結果2)
Opera12表示:画像は表示されずに、area要素のalt属性値テキストをリンクテキストとするリンクが表示されている
ソース3: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>
  
表示結果3
mapサンプル

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