area 要素 (HTML)

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

仕様書

[17] HTML Standard The area element http://www.whatwg.org/specs/web-apps/current-work/#the-area-element
[18] HTML Standard Image maps http://www.whatwg.org/specs/web-apps/current-work/#image-maps
[19] HTML Standard Links http://www.whatwg.org/specs/web-apps/current-work/#links
[20] HTML Standard Focus management http://www.whatwg.org/specs/web-apps/current-work/#focus-management
[21] HTML Standard Image maps http://www.whatwg.org/specs/web-apps/current-work/#image-maps-0

属性

属性名	属性値	既定値	説明	状態	出典
`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`	`%Shape`	`rect`	図形	[HTML 4]
`style`			スタイル情報	[HTML4] %coreattr
`tabindex`	`NUMBER`	(自動)	焦点移動順	[HTML 4]
`target`			対象枠・窓	[HTML 4] 非推奨
`title`			注釈的題	[HTML4] %coreattr
`xmlns`	`http://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 は対応していないようです。 2012-06-09T04:14:29.500Z Opera は Gecko と同様に実装しているようではありますが、 'display: none' では適用されなくなっていたようです >>13。

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

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

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

[30] Chrome ではそうなっていました。 2015-02-03T14:20:33.900Z

hit testing

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

hit testing も参照。

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

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

処理

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

歴史

[216] HTML要素概説

要素名: figa
日付: 1993-07-13
説明: 1993-07-13頃の現存最古の HTML+ DTD に、 figa がある。 HTML+19930713 現在の area に当たる。

[49] HTML TADS deviations from standard HTML specifications, 2007-06-23T19:42:00.000Z, 2024-08-17T11:50:05.445Z https://www.tads.org/t3doc/doc/htmltads/deviate.htm#deviations

HTML4

[3] HTML 4
- 13.6.1 Client-side image maps: the MAP and AREA elements http://www.w3.org/TR/html4/struct/objects.html#edef-AREA

XHTML2

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