[1] HTML の area 要素型の要素は、 クライアント側画像写像の領域region / areaを定義します。

仕様書

属性

[2]

属性名属性値既定値説明状態出典
accesskey%Char(自動)活性化鍵[HTML 4]
alt%Text(必須)代替文[HTML 4]
bulletin-date満期 (IETF I-D)
bulletin-expires満期 (IETF I-D)
bulletin-image%URI;満期 (IETF I-D)
bulletin-text%Text;満期 (IETF I-D)
class級[HTML4] %coreattr
coords%Coords座標[HTML 4]
csout非標準Adobe
csover非標準Adobe
dir書字方向[HTML4] %i18n
href%URI[HTML 4]
id一意識別子[HTML4] %coreattr
lang自然言語[HTML4] %i18n
xml:lang自然言語[XHTML1]
nohref(真偽値属性)(偽)リンク先なし[HTML 4]
onblur%Script(なし)[HTML 4]
onclick[HTML4] %events
ondblclick[HTML4] %events
onfocus%Script(なし)[HTML 4]
onkeydown[HTML4] %events
onkeypress[HTML4] %events
onkeyup[HTML4] %events
onmousedown[HTML4] %events
onmousemove[HTML4] %events
onmouseout[HTML4] %events
onmouseover[HTML4] %events
onmouseup[HTML4] %events
shape%Shaperect図形[HTML 4]
styleスタイル情報[HTML4] %coreattr
tabindexNUMBER(自動)焦点移動順[HTML 4]
target対象枠・窓[HTML 4] 非推奨
title注釈的題[HTML4] %coreattr
xmlnshttp://www.w3.org/1999/xhtml 固定W3C 勧告XHTML m12n

状態

[40]

relList
DOMTokenList

レンダリング

[37] ハイパーリンクの処理も参照。

[4] area は強制空要素で内容を持ちませんから、 普通 UA はレンダリングしません。画像や画像写像に対応していないときには、 代替文 (alt 属性) が使われます。 著者は alt を指定しなければなりません。

[5] map の内容に area とブロック水準要素が混ざっているときは、 UA は area を無視しなければなりません [HTML 4] 。

CSS と選択子

[22] 画像写像中のshapeは、 CSS のカスケードにあっては、その元となった area 要素とは別個ながらも同じスタイル規則を与えられた要素のように扱われることが期待されています。 >>21

[25] ただし area 要素の親要素からではなく、画像写像を使っている img 要素や object 要素から継承します。 >>21

[23] 1つの map 要素が複数の img 要素から参照されている場合、 同じ area 要素が1つの文書に複数箇所登場することになってしまうので、 このような変則的な扱いになっています。[26] HTML の利用者エージェント・スタイル・シートにおいて area 要素は 'display: none' となることが期待されていますが、この変則的な規定により、 shape に対する指定はその状態でも適用されます。

[24] shape のレンダリングに関しては、 'cursor' 特性だけが効果を持つことが期待されています。 >>21

[27] この規定は Gecko の実装を元に HTML に取り入れられました >>14。現時点で WinIE と Chrome は対応していないようです。 Opera は Gecko と同様に実装しているようではありますが、 'display: none' では適用されなくなっていたようです >>13。

[28] :link, :hover などの擬似クラスも通常通り適用されます。

[31] area 要素の style 属性の指定も対応する図形に適用されます >>21。

[7] area 要素の title 属性は、 対応する図形における tooltip としてレンダリングされるようです。

[30] Chrome ではそうなっていました。

hit testing

[35] click, mouseover, mouseleave のようなイベントの発火に関しては、画像内の領域が area 要素であると解釈されるようです。 (少なくても Chrome ではそうなっています。 )

hit testing も参照。[36] イベント経路的な意味での特別な親子関係は設けられていないようです。

[41] elementFromPoint では area が(あれば)得られるようです。

処理

[38] ハイパーリンクの処理も参照。

歴史

[216] HTML要素概説
要素名
figa
日付
説明
版 HTML+ DTD に figa がある。 HTML+19930713 現在の area に当たる。

[49] HTML TADS deviations from standard HTML specifications, , https://www.tads.org/t3doc/doc/htmltads/deviate.htm#deviations

HTML4

XHTML2

[11] XHTML2 では2つ目の作業原案で削除され、3つ目の作業原案で復活しています。 3つ目の作業原案の状態の章で2つ目の作業原案には編集上の誤りがあったと指摘されており、 素直に信じるなら削除はミスということになります。2つ目の作業原案では src と関連する属性が大域属性化され、 usemap 属性を削除するつもりで他の要素まで削除してしまった可能性があります。 あるいは、本当は area 要素も削除するつもりで、 後から方針を変更したのかもしれません。いずれにしても、大域属性化で area 要素は本質的に不要になったのになぜ残したのかは謎です。

- XHTML Client-Side Image Map Module ( 版) http://www.w3.org/TR/2002/WD-xhtml2-20021218/mod-csImgMap.html#sec_11.1.

[12] しかし1ヵ月後にはあっさり削除されています。

XHTML 2.0 ( 版) http://www.w3.org/TR/2003/WD-xhtml2-20030506/

AREA 要素 (DjVu XML)

[273] DjVu XML には HTML の area 要素から派生した AREA 要素がありました。

実装

[8] 画像に対応していても、画像写像には対応していないWebブラウザもあります (例: Emacs/W3)。 Emacs/W3 の場合は画像とは別に代替文から作られた選択肢一覧がレンダリングされるようです。

関連

[6] 画像写像の領域の定義には area を使う方法と a を使う方法があって、 HTML 4 では後者をすすめています (map の説明を参照してください)。

混在している場合は area が無視されるので (>>5)、 すべて area にするか、すべて a にするか、すべて両方で二重に定義するかしかありません。

[9] SMIL には同様の要素として anchor があります。

メモ

[10] The SMIL 3.0 Linking Modules ( 版) http://www.w3.org/TR/2008/REC-SMIL3-20081201/smil-extended-linking.html#edef-area

[29] Web Applications 1.0 r7829 I couldn't find a normative statement requiring that <area> only be inside <map>. ( ( 版)) http://html5.org/tools/web-apps-tracker?from=7828&to=7829

[32] Fix logic for <area shape=rect> · whatwg/html@6ac358f ( 版) https://github.com/whatwg/html/commit/6ac358f2608a8696c89f936e63e35c13f188fa63

[33] Inline URLUtils for a and area elements · whatwg/html@bab6591 ( 版) https://github.com/whatwg/html/commit/bab659163757d66177270bd4abe74a58f2732008

[34] Clarify that circular <area>'s radius in [coords] is in CSS px · whatwg/html@925ffb8 ( 版) https://github.com/whatwg/html/commit/925ffb821f49bcf6dcec88ca756e0189879d5462

[39] Integrate with the Referrer Policy spec, part 1 of n ( (domenic著, )) https://github.com/whatwg/html/commit/6a7318072f340ad45229df171245d70d8621c2fe

[42] <a> and <area> are not window named objects (ayg著, ) https://github.com/whatwg/html/commit/9c209523143cb97551799e185e2a5d2750854bda

[43] Centralize checks for <a>, <area>, <form>, and <link> (annevk著, ) https://github.com/whatwg/html/commit/f3c354add894e1ac01e3732ff976aa9874a77b3f

[44] Remove help cursor from user-agent stylesheet (domenic著, ) https://github.com/whatwg/html/commit/ea3cde3cba3a255e02bd73ef1036f1d2027c400d

[45] Remove help cursor from user-agent stylesheet by domenic · Pull Request #3902 · whatwg/html () https://github.com/whatwg/html/pull/3902

[46] Define what tabIndex returns when the tabindex attribute is not set (rakina著, ) https://github.com/whatwg/html/commit/15cf23a55d629e0b1286302c19634833a89292ab

[47] Make autofocus="" work with delegatesFocus and <area> (tkent-google, , ) https://github.com/whatwg/html/commit/bcd5d619063c809f297c1b8dfd13146ee2993371

[48] delegatesFocus doesn't work well with autofocus · Issue #5027 · whatwg/html () https://github.com/whatwg/html/issues/5027