area - イメージマップのクリック領域

map要素とともにイメージマップを定義します。
area要素は、イメージマップのクリックできる領域、または無効な領域のいずれかを表します。

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

- ie6 ie7 ie8 ie9 firefox4 chorme safari5 opera10
area

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

HTML5では以下の属性が廃止されました。
・nohref属性
HTML5では、以下の属性が新しく追加されました。
・hreflang属性
・media属性
・rel属性
・type属性

コンテンツ属性

グローバル属性 すべての要素で共通に使える属性。HTML5で新たに定義された属性もあります。
alt リンクの代替えテキスト(hrefがある場合必須)
coords リンク領域の形状に合わせた座標を半角カンマ(,)区切りで指定
shape属性値により指定する値の数が変わります。
・shape属性値がcircleまたはcirc(非準拠)
 3つの整数(px値)で指定
 ・"左端からの円の中心までの距離"
 ・"上端から円の中心までの距離"
 ・"円の半径"
・shape属性値がdefault
 画像全体リンク領域なので、coords属性を持ってはいけません。
・shape属性値がpolyまたはpolygon(非準拠)
 6つ以上の、偶数の整数(px値)で指定。(それぞれの左端からの距離、上端からの距離という順番で指定していきます)
 6つの座標を指定することで三角形を、8つの座標を指定することで四角形を表すことができます。
 ・"1つ目の座標の左端からの距離"
 ・"1つ目の座標の上端からの距離"
 ・"2つ目の座標の左端からの距離"
 ・"2つ目の座標の上端からの距離"
 ・"3つ目の座標の左端からの距離"
 ・"3つ目の座標の上端からの距離"
・shape属性値がrectまたはrectangle(非準拠)
 4つの整数(px値)で指定。
 ・"画像の左端からリンク領域の左端までの距離"
 ・"画像の上端からリンク領域の上端までの距離"
 ・"画像の左端からリンク領域の右端までの距離"
 ・"画像の上端からリンク領域の下端までの距離"
shape リンク領域の形状
・circleまたはcirc(非準拠)
 円形(正円のみ)
・default
 画像全体がリンク領域
・polyまたはpolygon(非準拠)
 多角形
・rectまたはrectangle(非準拠)
 長方形
href リンク先のURL
target リンク先の開きかた(href属性値がない場合は省略)
・_blank - 名前のない新しいウインドウに表示
・_self - 現在のウインドウに表示
・_parent - フレーム内からのリンクの場合、フレーム設定文書(多くの場合、フレームを解除しウインドウ全体)に表示
・_top - フレーム内からのリンクの場合、フレームを解除し最上位ウインドウ全体に表示
・任意の名前 - リンク先を指定の名称を持つ新しいウィンドウひ表示
ping リンクを辿ったことを通知するURL(href属性値がない場合は省略)
rel リンクとの関係を指定(href属性値がない場合は省略)
media リンク先のメディアを指定(href属性値がない場合は省略)
hreflang リンク先の言語を指定(href属性値がない場合は省略)
type リンク先のMIMEタイプを指定(href属性値がない場合は省略)

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

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-area-element)