* 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(SGML)[([CODE(HTMLe)[[[area]]]] | %[[block]];)+]] :出現できる文脈:[CODE(SGML)[%block]] な文脈 (歴史的変遷: ) :[[属性]]: ,属性名 ,属性値 ,既定値 ,説明 ,出典 ,[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つ以上の範囲が重なっているときには、[[文書順]]で最初のものが優先されます (利用者の入力を受取ります)。 [[#comment]] ** レンダリング [7] UA は、普通 [CODE(HTMLe)[map]] 要素の内容の [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 の注釈に書かれています。 ([[名無しさん]] [sage]) [[#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]]]] 属性はどうも使いにくい。 [[#comment]] ** メモ [[#comment]] * メモ