Edit

Page

Page title:

Page body:

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

* 仕様書

[REFS[
- [17] '''[CITE@en-US-x-hixie[HTML Standard]] [CSECTION@en[The [CODE(HTMLe)@en[area]] element]] <http://www.whatwg.org/specs/web-apps/current-work/#the-area-element>'''
- [18] [CITE@en-US-x-hixie[HTML Standard]] [CSECTION@en[Image maps]] <http://www.whatwg.org/specs/web-apps/current-work/#image-maps>
- [19] [CITE@en-US-x-hixie[HTML Standard]] [CSECTION@en[Links]] <http://www.whatwg.org/specs/web-apps/current-work/#links>
- [20] [CITE@en-US-x-hixie[HTML Standard]] [CSECTION@en[Focus management]] <http://www.whatwg.org/specs/web-apps/current-work/#focus-management>
- [21] [CITE@en-US-x-hixie[HTML Standard]] [CSECTION@en[Image maps]] <http://www.whatwg.org/specs/web-apps/current-work/#image-maps-0>
]REFS]

* 属性

[2]
[FIG(short list)[
- [[共通属性]]
- [CODE(HTMLa)@en[download]]
- [CODE(HTMLa)@en[ping]]
- [CODE(HTMLa)@en[referrerpolicy]]
]FIG]

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

* 状態

[40] 
[FIG(list members)[
: [F[[CODE(DOMa)@en[relList]]]] : [CODE(DOMi)@en[DOMTokenList]]
]FIG]

* レンダリング

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

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

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

* CSS と選択子

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

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

;; [23] 1つの [CODE(HTMLe)@en[[[map]]]] [[要素]]が複数の [CODE(HTMLe)@en[[[img]]]] [[要素]]から参照されている場合、
同じ [CODE(HTMLe)@en[[[area]]]] [[要素]]が1つの[[文書]]に複数箇所登場することになってしまうので、
このような変則的な扱いになっています。

;; [26] [[HTML]] の[[利用者エージェント・スタイル・シート]]において [CODE(HTMLe)@en[[[area]]]] [[要素]]は
[CODE(CSS)@en['[[display]]: [[none]]']] となることが[[期待されています]]が、この変則的な規定により、
[[shape]] に対する指定はその状態でも適用されます。

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

[REFS[
-[14] [CITE@en[''''''[''''''whatwg'''''']'''''' Styling of area elements (as displayed within referencing image)]]
( ([[L. David Baron]] 著, [TIME[2007-05-11 03:21:21 +09:00]] 版))
<http://lists.w3.org/Archives/Public/public-whatwg-archive/2007May/0102.html>
-[15] [CITE@en[''''''[''''''whatwg'''''']'''''' Styling of area elements (as displayed within	referencing image)]]
( ([[L. David Baron]] 著, [TIME[2009-02-12 04:36:25 +09:00]] 版))
<http://lists.w3.org/Archives/Public/public-whatwg-archive/2009Feb/0130.html>
-[16] [CITE@en[''''''[''''''whatwg'''''']'''''' Styling of area elements (as displayed within	referencing image)]]
( ([[Ian Hickson]] 著, [TIME[2009-02-14 05:03:53 +09:00]] 版))
<http://lists.w3.org/Archives/Public/public-whatwg-archive/2009Feb/0186.html>
-[13] [CITE@en[Using cursor property on <area> elements that have a display of  'none']]
( ([[Michael A. Puls II]] 著, [TIME[2011-02-18 00:55:00 +09:00]] 版))
<http://lists.w3.org/Archives/Public/www-style/2011Feb/0513.html>
]REFS]

[27] この規定は [[Gecko]] の実装を元に [[HTML]] に取り入れられました [SRC[>>14]]。現時点で
[[WinIE]] と [[Chrome]] は対応していないようです。 [TIME[2012-06-09T04:14:29.500Z]]
[[Opera]] は [[Gecko]] と同様に実装しているようではありますが、 [CODE(CSS)@en['[[display]]: [[none]]']]
では適用されなくなっていたようです [SRC[>>13]]。

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

[31] [CODE(HTMLe)@en[[[area]]]] [[要素]]の [CODE(HTMLa)@en[[[style]]]]
[[属性]]の指定も対応する図形に適用されます [SRC[>>21]]。

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

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

* hit testing

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

;; [[hit testing]] も参照。

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

-*-*-

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

* 処理

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

* 歴史

[FIG(data)[ [216] [[HTML要素概説]]

:[F[要素名]]:[CODE[figa]]
:日付:[TIME[1993-07-13]]
:説明:
[TIME[1993-07-13]]版 [CITE[HTML+]] [[DTD]]
に
[CODE[figa]] 
がある。
[SRC[HTML+19930713]]
現在の [CODE[area]] に当たる。

]FIG]

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

** HTML4

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

** XHTML2

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

;;
[CITE@en[- XHTML Client-Side Image Map Module]] ([TIME[2002-12-18 19:57:57 +09:00]] 版) <http://www.w3.org/TR/2002/WD-xhtml2-20021218/mod-csImgMap.html#sec_11.1.>

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

;; [CITE@en[XHTML 2.0]] ([TIME[2003-05-08 01:23:41 +09:00]] 版) <http://www.w3.org/TR/2003/WD-xhtml2-20030506/>

** [CODE[AREA]] 要素 (DjVu XML)

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

* 実装

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

* 関連

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

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

[9] [[SMIL]] には同様の[[要素]]として [CODE(XMLe)@en[[[anchor]]]] があります。

* メモ

[10] [CITE[The SMIL 3.0 Linking Modules]] ([TIME[2008-12-02 00:45:09 +09:00]] 版) <http://www.w3.org/TR/2008/REC-SMIL3-20081201/smil-extended-linking.html#edef-area>

[29] [CITE@en[Web Applications 1.0 r7829  I couldn't find a normative statement requiring that <area> only be inside <map>.]]
( ([TIME[2013-04-14 02:18:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=7828&to=7829>

[32] [CITE@en[Fix logic for <area shape=rect> · whatwg/html@6ac358f]]
([TIME[2015-08-29 01:07:08 +09:00]] 版)
<https://github.com/whatwg/html/commit/6ac358f2608a8696c89f936e63e35c13f188fa63>

[33] [CITE@en[Inline URLUtils for a and area elements · whatwg/html@bab6591]]
([TIME[2015-10-07 13:40:36 +09:00]] 版)
<https://github.com/whatwg/html/commit/bab659163757d66177270bd4abe74a58f2732008>

[34] [CITE@en[Clarify that circular <area>'s radius in ''''''[''''''coords'''''']'''''' is in CSS px · whatwg/html@925ffb8]]
([TIME[2016-03-05 11:15:11 +09:00]] 版)
<https://github.com/whatwg/html/commit/925ffb821f49bcf6dcec88ca756e0189879d5462>

[39] [CITE@en[Integrate with the Referrer Policy spec, part 1 of n]]
( ([[domenic]]著, [TIME[2016-05-05 23:01:42 +09:00]]))
<https://github.com/whatwg/html/commit/6a7318072f340ad45229df171245d70d8621c2fe>

[42] [CITE@en[<a> and <area> are not window named objects]]
([[ayg]]著, [TIME[2017-09-06 22:44:24 +09:00]])
<https://github.com/whatwg/html/commit/9c209523143cb97551799e185e2a5d2750854bda>

[43] [CITE@en[Centralize checks for <a>, <area>, <form>, and <link>]]
([[annevk]]著, [TIME[2017-09-22 21:04:25 +09:00]])
<https://github.com/whatwg/html/commit/f3c354add894e1ac01e3732ff976aa9874a77b3f>

[44] [CITE@en[Remove help cursor from user-agent stylesheet]]
([[domenic]]著, [TIME[2018-08-11 07:37:15 +09:00]])
<https://github.com/whatwg/html/commit/ea3cde3cba3a255e02bd73ef1036f1d2027c400d>

[45] [CITE@en[Remove help cursor from user-agent stylesheet by domenic · Pull Request #3902 · whatwg/html]]
([TIME[2018-08-14 23:24:26 +09:00]])
<https://github.com/whatwg/html/pull/3902>

[46] [CITE@en[Define what tabIndex returns when the tabindex attribute is not set]]
([[rakina]]著, [TIME[2019-07-10 03:13:55 +09:00]])
<https://github.com/whatwg/html/commit/15cf23a55d629e0b1286302c19634833a89292ab>

[47] [CITE@en[Make autofocus="" work with delegatesFocus and <area>]]
([[tkent-google]], [TIME[2019-11-12 01:44:20 +09:00]], [TIME[2021-03-16T07:25:22.000Z]])
<https://github.com/whatwg/html/commit/bcd5d619063c809f297c1b8dfd13146ee2993371>

[48] [CITE@en[delegatesFocus doesn't work well with autofocus · Issue #5027 · whatwg/html]]
([TIME[2021-03-16T07:26:32.000Z]])
<https://github.com/whatwg/html/issues/5027>

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Page name(s)