* map 要素型 (HTML, XHTML 1) [1] [[HTML]] の [DFN[[CODE(HTMLe)[map]] 要素型]]の要素は、 [[クライアント側画像写像]] (や他の誘導機構) を定義します。 元々画像写像のために定義された要素型ですが、 画像とは関係なしに一般の[RUBY[誘導] [ナビゲーション]]のために使うことができます [SRC[HTML 4.01 13.6.1]]。 [3] 仕様書: - [[HTML 4]] -- [CITE[13.6.1 Client-side image maps: the [CODE(HTMLe)[MAP]] and [CODE(HTMLe)[AREA]] elements]] -- [CITE[HTML 4 Changes]] -- [CITE[HTML 4 Changes]] [2] :[[名前空間]]:[CODE(URI)[[[http://www.w3.org/1999/xhtml]]]] :[[局所名]]:[CODE(HTMLe)[map]] :[[開始タグ]]:必須 :[[終了タグ]]:必須 :分類:特殊な[[行内水準要素]] :[[内容模型]]:[CODE(SGML)[([CODE(HTMLe)[[[area]]]] | %[[block]];)+]] :出現できる文脈:[CODE(SGML)[%[[inline]]]] な文脈 (歴史的変遷: ) :[[属性]]: ,属性名 ,属性値 ,既定値 ,説明 ,出典 ,[CODE(HTMLa)[[[class]]]] , , ,[[級]] ,[HTML4] %[[coreattr]] ,[CODE(HTMLa)[[[dir]]]] , , ,[[書字方向]] ,[HTML4] %[[i18n]] ,[CODE(HTMLa)[[[id]]]] , , ,一意識別子 ,[HTML4] %coreattr ,[CODE(HTMLa)[[[lang]]]] , , ,[[自然言語]] ,[HTML4] %i18n ,[CODE(HTMLa)[[[xml]]:lang]] , , ,自然言語 ,[XHTML1] ,[CODE(HTMLa)[[[name]]]] , , ,画像写像名 ,[HTML 4] ,[CODE(HTMLa)[[[onclick]]]] , , , ,[HTML4] %[[events]] ,[CODE(HTMLa)[[[ondblclick]]]] , , , ,[HTML4] %events ,[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)[[[style]]]] , , ,スタイル情報 ,[HTML4] %coreattr ,[CODE(HTMLa)[[[title]]]] , , ,注釈的題 ,[HTML4] %coreattr [[#comment]] ** 内容 [6] [CODE(HTMLe)[map]] 要素の[[内容]]としては2種類のものを入れることができます。 :[CODE(HTMLe)[[[area]]]] 要素: 1つの [CODE(HTMLa)[area]] 要素が1つの領域を定義します。 普通 UA は [CODE(HTMLe)[area]] 要素をレンダリングしません。 [[強制空要素]]なので、 [[HTML 2.0]] など古い仕様・実装とは非互換です。 :[[ブロック水準要素]]: この内容は領域を定義する [CODE(HTMLe)[[[a]]]] 要素を含むべきです。 UA はブロック水準要素をレンダリングするべきです [SRC[HTML 4.01 13.6.1]] (以前はしても''よい''とされていました [SRC[HTML 4.0 13.6.1]])。 [[HTML 4]] で追加された方法ですが、より accessible なこちらの方法が推奨されています。 [8] 著者は、すべての領域を [CODE(HTMLe)[area]] 要素で定義するか、すべてをブロック水準要素で定義するか、 すべてを両方で定義するかにするべきです。 こうすれば新旧 UA で幸せになれます。 混在時は [CODE(HTMLe)[area]] をすべて無視しなければなりません。 [SRC[HTML 4.01 13.6.1]] 2つ以上の範囲が重なっているときには、[[文書順]]で最初のものが優先されます (利用者の入力を受取ります)。 [21] >>8 (原文も) やや曖昧な気がしますが、重なる部分を持つ範囲が複数定義されている時は、''重なっている部分について''はじめのものが使われる、ということでよいのでしょうかね? ([[名無しさん]]) [[#comment]] ** 使用できる文脈 [15] [[HTML 4]] において [CODE(HTMLe)[[[map]]]] 要素は[[行内要素]]でありながら、 [[内容]]としては [CODE(HTMLe)[[[area]]]] 要素の他[[ブロック水準要素]]も認められます。 [CODE(HTMLe)[[[object]]]] 要素と並んで[[ブロック水準要素]]の内側に[[行内要素]]という構造を逸脱した存在になっています。 [16] 元々 [CODE(HTMLe)[[[map]]]] 要素は [CODE(HTMLe)[[[area]]]] 要素と組合せる方法しか用意されていませんでした。 [CODE(HTMLe)[[[area]]]] は[[強制空要素]]型で、関連付けられた [CODE(HTMLe)[[[img]]]] 要素上の領域を作成する以外は文書構造やレンダリングにおいて何の意味も持ちませんでした。 この状態に於いては [CODE(HTMLe)[[[map]]]] 要素をどこに書こうが問題はありませんでした。 [WEAK[(そういう場合は [CODE(HTMLe)[[[head]]]] に入れるのがよかったのかもしれません。あるいは [CODE(HTMLe)[[[img]]]] が[[強制空要素]]でなければその中に書ければよかったかもしれません。)]] [17] しかし、 [[HTML 4]] で[[ブロック水準要素]]が [CODE(HTMLe)[[[map]]]] 要素の[[内容]]に認められたために >>15 のようなおかしなことが起こりました。しかも画像写像に限らず navigation 一般に semantics が拡大されたために、 >>14 のような不都合が生じました。[[ブロック水準要素]]を[[内容]]として認めるなら [CODE(HTMLe)[map]]]] 自体も[[ブロック水準要素]]にするべきだったのです。 互換性の問題があるとすれば、[[移行用DTD]] では[[行内要素]]としても使えることにすればよかったのです。 [[#comment]] ** レンダリング [7] UA は、普通 [CODE(HTMLe)[map]] 要素の内容の [CODE(HTMLe)[area]] 要素はレンダリングせず、ブロック水準要素はレンダリングします。 [[#comment]] ** アクセス可能性 [18] '''ブロック水準要素の内容''': 元々 [CODE(HTMLe)[[[map]]]] 要素の[[内容]]としては[[強制空要素]]の [CODE(HTMLe)[[[area]]]] しか使えませんでしたが、 [[アクセス可能性]]の向上のために任意の[[ブロック水準要素]]が使えるようになりました。 しかしどれだけ[[利用者エージェント]]が対応しているかはよくわかっていません。 そのためかあまり使われないので、 [[HTML 5]] には入らない見込みです (>>14)。 [19] '''代替内容''': [CODE(HTMLe)[[[map]]]] と [CODE(HTMLe)[[[area]]]] による画像写像は、 対応していない[[利用者エージェント]]や画像を表示できない[[利用者エージェント]]でうまく扱えないという問題があります。 ''著者''は、 [CODE(HTMLe)[[[area]]]] によるリンクと実質的に同じものを [CODE(HTMLe)[[[a]]]] でも別途提供するべきです。 ''利用者エージェント''は、 [CODE(HTMLe)[[[area]]]] によるリンクを画像がなくてもたどれる手段やその存在自体を通知する方法を用意するべきです。 [[#comment]] ** 関連 [4] [CODE(HTMLe)[map]] 要素で定義した画像写像は、 [CODE(HTMLa)[[[usemap]]]] 属性を使って参照 (使用) できます。 [5] 画像写像の個々の領域は [CODE(HTMLe)[[[a]]]] 要素や [CODE(HTMLe)[[[area]]]] 要素によって定義します。 [12] [CODE(HTMLe)[map]] 要素の参照と [[HTML]] vs [[XHTML]] と [CODE(HTMLa)[[[id]]]] vs [CODE(HTMLa)[[[name]]]] の問題 [CITE[Bug 109445 - Referencing a client-side image map declared with id attribute doesn't work]] [CITE[[whatwg] [HTML5] both ID and NAME attributes apply to MAP element]] [13] [CODE(HTMLe)[map]] は画像写像として使う画像と同じ文書にあってもよいし、違う文書にあってもよいがあまり対応されていないと HTML 4 DTD の注釈に書かれています。 [[#comment]] ** 例 [9] [CODE(HTMLe)[[[object]]]] + 画像写像の例 [PRE(HTML)[ The cool site!

Navigate the site: Access Guide | Go | Search | Top Ten

]PRE] [WEAK[(HTML 4 仕様書より、改)]] この例では、 [CODE(HTMLe)[object]] で画像を表示できるときには誘導リンク集をレンダリングしません。 [10] [CODE(HTMLe)[object]] + 画像写像の例 [PRE(HTML)[ The cool site!

...the rest of the page here...

Navigate the site: Access Guide | Go | Search | Top Ten ]PRE] [WEAK[(HTML 4 仕様書より、改)]] こちらの例では、 [CODE(HTMLe)[object]] で画像が表示できる場合にも誘導リンク集をレンダリングします。 [11] 複数の [CODE(HTMLe)[object]] で画像写像を共有する例 [PRE(HTML)[

Navigate the site: Access Guide | Go | Search | Top Ten

]PRE] [WEAK[(HTML 4 仕様書より、改)]] [14] 単なる案内のために使った例 [PRE(HTML example code)[

]PRE] 出典: [CITE[[whatwg] [html5] 2.6.1. The a element]] 著者は [CODE(HTMLe)[[[map]]]] は[[行内要素]]で [CODE(HTMLe)[[[body]]]] の子供にできないので仕方なく [CODE(HTMLe)[[[div]]]] を使っていると言っています。 [CODE(HTMLa)[[[name]]]] 属性または [CODE(HTMLa)[[[id]]]] 属性が必須だったり、 [CODE(HTMLe)[[[map]]]] 属性はどうも使いにくい。 [20] 単なる案内のために使った例 [PRE(HTML example code)[ ]PRE] >>14 と同じく、[[画像写像]]とは関係なく案内のための文字 base な内容。無意味な [CODE(HTMLe)@en[[[div]]]], [CODE(HTMLe)@en[[[map]]]], [CODE(HTMLe)@en[[[div]]]] の三重奏には心打たれます。 どう考えても欠陥仕様だけど自分のところで作った以上律儀に守っているお茶目な [[W3C]] ったらもう[AA(fw)[wwww]] 出典: [CITE@en[World Wide Web Consortium]] (2005年7月現在) [22] [PRE(HTML example code)[ [INS[...]]

旅行.Infoへ PDF版を開く [INS[...]] ]PRE] ;;[CITE[京都近郊鉄道路線図]] (2006年1月付け) [[#comment]] ** メモ [[#comment]] * メモ