area 要素

4.8.13 area 要素

カテゴリー
フロー・コンテンツ
フレージング・コンテンツ
この要素を使うことができるコンテキスト：
フレージング・コンテンツが期待される場所。ただし、祖先に map 要素がある場合に限ります。
コンテンツモデル
空
コンテンツ属性：
グローバル属性
alt
coords
shape
href
target
rel
media
hreflang
type
DOMインタフェース：
interface HTMLAreaElement : HTMLElement {
           attribute DOMString alt;
           attribute DOMString coords;
           attribute DOMString shape;
  stringifier attribute DOMString href;
           attribute DOMString target;
           attribute DOMString rel;
  readonly attribute DOMTokenList relList;
           attribute DOMString media;
           attribute DOMString hreflang;
           attribute DOMString type;

  // URL decomposition IDL attributes
           attribute DOMString protocol;
           attribute DOMString host;
           attribute DOMString hostname;
           attribute DOMString port;
           attribute DOMString pathname;
           attribute DOMString search;
           attribute DOMString hash;
};

area 要素は、いくつかのテキストを持ったハイパーリンクとイメージマップ上の対応する領域、または、イメージマップ上の無効な領域のいずれかを表します。

area 要素が href 属性を持つなら、その area 要素はハイパーリンクを表します。この場合、alt 属性は必須で、ハイパーリンクのテキストを指定します。そのテキストは、仮に、イメージマップの他のハイパーリンクに対してテキストが指定され、イメージには代替テキストが指定されているけれども、それ自身はイメージを持たなかったとしても、テキストはないけれどもイメージに適用された形状を伴うようなハイパーリンクと同じようにユーザーが選択できるようなテキストでなければいけません。alt 属性は、同じイメージマップの中に、同じリソースに向き、空でない alt 属性を持った area 要素が他にあるなら、空のままにしておくことができます。

area 要素が href 属性を持たなければ、この要素で表される領域は選択できません。alt 属性は省略されなければいけません。

いずれの場合も、shape と coords 属性は、その領域を指定します。

shape 属性は列挙属性です。下表はこの属性に定義されているキーワードをリストしたものです。キーワードの行の最初のセルに記載された状態は、そのキーワードに対応する状態を表します。いくつかのキーワードは、最後のカラムに記載されている通り、非準拠となります。

状態 キーワード 備考
Circle 状態 circle
circ 非準拠
Default 状態 default
Polygon 状態 poly
polygon 非準拠
Rectangle 状態 rect
rectangle 非準拠

この属性は省略できます。省略時のデフォルトは、rectangle 状態です。

coords 属性は、指定されたら、妥当な整数リストを含まなければいけません。この属性は、shape 属性によって描かれた形状の座標を与えます。この属性の処理は、イメージマップ処理モデルの一部として説明されています。

circle 状態では、area 要素は、coords 属性を持たなければならず、この属性は、3 つの整数を持ち、その最後は、非負整数でなければいけません。最初の整数は、イメージの左端から円の中心までの距離を CSS ピクセルで表したものでなければいけません。2 つ目の整数は、イメージの上端から円の中心までの距離を CSS ピクセルで表したものでなければいけません。そして、3 つ目の整数は、円の半径を、これもまた CSS ピクセルで表したものでなければいけません。

default 状態では、area 要素は、coords 属性を持ってはいけません。（イメージ全体がその領域になります）

polygon 状態 では、area 要素は、少なくとも 6 つ以上の偶数個の整数を伴った coords 属性を持たなければいけません。整数のそれぞれのペアは、それぞれ、イメージの左と上からの距離を CSS ピクセルで表して与えられた座標を表します。そして、すべての座標はまとめて、多角形の頂点の位置を順番に表さなければいけません。

rectangle 状態 では、area 要素は、正確に 4 つの整数を持たなければいけません。最初の整数は、3 つ目の整数より小さくなければいけません。そして、2 つ目の整数は、4 つ目の整数より小さくなければいけません。この 4 つの整数はそれぞれ、イメージの左端から矩形の左側までの距離、上端から上側までの距離、左端から右側までの距離、上端から下側までの距離を、すべて CSS ピクセルで表したものでなければいけません。

ユーザーエージェントが、area 要素を使って生成されたハイパーリンクをユーザーがたどることができるようにするとき、href, target 属性は、そのリンクをどうやってたどるのかを決めます。rel, media, hreflang, type 属性は、ユーザーがリンクをたどる前に、目標のリソースはどんな特性を持っているのかを示すために使われます。

target, rel, media, hreflang, type 属性は、もし href 属性が存在しなければ、省略されなければいけません。

area 要素のアクティベーション・ビヘイビアでは、次の手順を実行します：

  1. もし、該当の DOMActivate イベントが信用できなく（つまり、そのイベントは、click() メソッドのコールによって呼び出された）、area 要素の target 属性が、ブラウジング・コンテキスト名としてその target 属性の値を使ってブラウジング・コンテキスト名を指定してブラウジング・コンテキストを選択するためのルールを適用したら、選択されたブラウジング・コンテキストでないという結果になってしまうようなら、その時は、INVALID_ACCESS_ERR 例外を発出して、これらの手順を中止します。

  2. そうでなければ、ユーザーエージェントは、area 要素によって定義されたハイパーリングがあれば、そのハイパーリンクをたどらなければいけません。

IDL 属性 alt, coords, href, target, rel, media, hreflang, type, はそれぞれ、同じ名前の対応するコンテンツ属性を反映しなければいけません。

IDL 属性 shape は、shape コンテンツ属性を反映しなければいけません。

IDL 属性 relList は、rel コンテンツ属性を反映しなければいけません。

area 要素は、URL 分離属性 protocol, host, port, hostname, pathname, search, hash もサポートします。これらは、URL 分離属性に対して与えられたルールに従わなければいけません。この属性があり解決が成功すれば、href 属性を解決した結果を、そのルールへの入力とます。そうでなければ、空文字列とします。そして、共通のセッター・アクションは、その要素の href 属性を新たな出力値にセットするのと同じになります。

※ 原文：http://www.w3.org/TR/2011/WD-html5-20110525/the-map-element.html#the-area-element