[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]] '''
- [18] [CITE@en-US-x-hixie[HTML Standard]] [CSECTION@en[Image maps]]
- [19] [CITE@en-US-x-hixie[HTML Standard]] [CSECTION@en[Links]]
- [20] [CITE@en-US-x-hixie[HTML Standard]] [CSECTION@en[Focus management]]
- [21] [CITE@en-US-x-hixie[HTML Standard]] [CSECTION@en[Image maps]]
]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]] 版))
-[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]] 版))
-[16] [CITE@en[''''''[''''''whatwg'''''']'''''' Styling of area elements (as displayed within referencing image)]]
( ([[Ian Hickson]] 著, [TIME[2009-02-14 05:03:53 +09:00]] 版))
-[13] [CITE@en[Using cursor property on elements that have a display of 'none']]
( ([[Michael A. Puls II]] 著, [TIME[2011-02-18 00:55:00 +09:00]] 版))
]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]]
** HTML4
-[3] [[HTML 4]]
-- [CSECTION[13.6.1 Client-side image maps: the [CODE(HTMLe)[MAP]] and [CODE(HTMLe)[AREA]] elements]]
** 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]] 版)
[12] しかし1ヵ月後にはあっさり削除されています。
;; [CITE@en[XHTML 2.0]] ([TIME[2003-05-08 01:23:41 +09:00]] 版)
** [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]] 版)
[29] [CITE@en[Web Applications 1.0 r7829 I couldn't find a normative statement requiring that only be inside