map - イメージマップを作成

area要素とともにイメージマップを定義します。
イメージマップとは、画像など外部リソースの特定領域に、四角形・円形・多角形などの形状でリンクを設定したものです。
利用例:地図画像の特定部分をクリックしてリンクできるようにする。
子要素にarea要素を配置して、リンク先、領域などを指定します。

map要素のブラウザ別サポート状況

- ie6 ie7 ie8 ie9 firefox4 chorme safari5 opera10
map

map要素のHTML4からHTML5への変更点

HTML5では、map要素にid属性を指定する場合には、 name属性と同じ値にしなくてはならなくなりました。

コンテンツ属性

グローバル属性 すべての要素で共通に使える属性。HTML5で新たに定義された属性もあります。
name イメージマップとの関連付け(必須)
img要素やobject要素のusemap属性の値と一致させることで関連付けることができます。

「イメージマップ」のサンプル

HTMLコード

<img src="http://nekodama.sakura.ne.jp/images/webdev/html/example_map.jpg" usemap="#sample" alt="サンプル" width="300" height="200">
<map name="sample">
<area href="http://webdev-nekodama.xii.jp/html/" shape="rect" alt="四角形" coords="30,20,80,70">
<area href="http://webdev-nekodama.xii.jp/jqueryTools/" shape="circle" alt="円形" coords="200,80,65">
<area href="http://webdev-nekodama.xii.jp/css/" shape="poly" alt="多角形" coords="83,95,137,134,84,195,21,186,25,149">
</map> 

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「イメージマップ」のサンプルプレビューを確認

原文(英語):(http://www.w3.org/TR/2010/WD-html5-20100304/the-canvas-element.html#the-map-element)