785.txt

* 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]]
<IW:HTML4:"struct/objects.html#edef-MAP">
-- [CITE[HTML 4 Changes]]
<IW:HTML4:"appendix/changes.html#h-A.1.1.9">
-- [CITE[HTML 4 Changes]]
<IW:HTML4:"appendix/changes.html#h-A.1.2">

[2]
:[[名前空間]]:[CODE(URI)[[[http://www.w3.org/1999/xhtml]]]]
:[[局所名]]:[CODE(HTMLe)[map]]
:[[開始タグ]]:必須
:[[終了タグ]]:必須
:分類:特殊な[[行内水準要素]]
:[[内容模型]]:[CODE(SGML)[([CODE(HTMLe)[[[area]]]] | %[[block]];)+]]
:出現できる文脈:[CODE(SGML)[%[[inline]]]] な文脈
(歴史的変遷: <http://suika.fam.cx/www/2004/html/classes>)
:[[属性]]:
,属性名	,属性値	,既定値	,説明	,出典
,[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]]]]
によるリンクを画像がなくてもたどれる手段やその存在自体を通知する方法を用意するべきです。

** 歴史

*** XHTML2

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

;;
[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.>

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

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

** 関連

[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]] <https://bugzilla.mozilla.org/show_bug.cgi?id=109445>

[CITE[[whatwg] [HTML5] both ID and NAME attributes apply to MAP element]] <http://listserver.dreamhost.com/pipermail/whatwg-whatwg.org/2005-January/002782.html>

[13]
[CODE(HTMLe)[map]] は画像写像として使う画像と同じ文書にあってもよいし、違う文書にあってもよいがあまり対応されていないと HTML 4 DTD の注釈に書かれています。

[[#comment]]


** 例

[9] [CODE(HTMLe)[[[object]]]] + 画像写像の例
[PRE(HTML)[
<HTML lang="en">
   <HEAD>
      <TITLE>The cool site!</TITLE>
   </HEAD>
   <BODY>
     <P><OBJECT data="navbar1.png" type="image/png" usemap="#MAP1">
     <MAP name="MAP1">
       <P>Navigate the site:
       <A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a> |
       <A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A> |
       <A href="search.html" shape="circle" coords="184,200,60">Search</A> |
       <A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">Top Ten</A>
     </MAP>
     </OBJECT>
   </BODY>
</HTML>
]PRE]

[WEAK[(HTML 4 仕様書より、改)]]

この例では、 [CODE(HTMLe)[object]] 
で画像を表示できるときには誘導リンク集をレンダリングしません。

[10] [CODE(HTMLe)[object]] + 画像写像の例
[PRE(HTML)[
<HTML lang="en">
   <HEAD>
      <TITLE>The cool site!</TITLE>
   </HEAD>
   <BODY>
     <P><OBJECT data="navbar1.png" type="image/png" usemap="#MAP1">
     </OBJECT>
     ...the rest of the page here...
     <MAP name="MAP1">
       <P>Navigate the site:
       <A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a> |
       <A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A> |
       <A href="search.html" shape="circle" coords="184,200,60">Search</A> |
       <A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">Top Ten</A>
     </MAP>
   </BODY>
</HTML>
]PRE]

[WEAK[(HTML 4 仕様書より、改)]]

こちらの例では、 [CODE(HTMLe)[object]]
で画像が表示できる場合にも誘導リンク集をレンダリングします。

[11] 複数の [CODE(HTMLe)[object]] で画像写像を共有する例
[PRE(HTML)[
<P>
<OBJECT data="navbar.png" type="image/png" usemap="#MAP1">
  <OBJECT data="navbar.jpeg" type="image/jpeg" usemap="#MAP1">
     <MAP name="MAP1">
     <P>Navigate the site:
      <A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a> |
      <A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A> |
      <A href="search.html" shape="circle" coords="184,200,60">Search</A> |
      <A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">Top Ten</A>
     </MAP>
  </OBJECT>
</OBJECT>
]PRE]

[WEAK[(HTML 4 仕様書より、改)]]

[14] 単なる案内のために使った例

[PRE(HTML example code)[
   <div><map id="nav"><ul>
     <li><a href="/">Home</a></li>
     [VAR[...]]
     <li><a>Current page</a></li>
     [VAR[...]]
     <li><a href="/contact/">Contact</a></li>
   </ul></map></div>
]PRE]

出典: [CITE[[whatwg] [html5] 2.6.1. The a element]] 
<http://listserver.dreamhost.com/pipermail/whatwg-whatwg.org/2005-April/003551.html>

著者は [CODE(HTMLe)[[[map]]]] は[[行内要素]]で
[CODE(HTMLe)[[[body]]]] の子供にできないので仕方なく
[CODE(HTMLe)[[[div]]]] を使っていると言っています。
[CODE(HTMLa)[[[name]]]] 属性または [CODE(HTMLa)[[[id]]]] 
属性が必須だったり、 [CODE(HTMLe)[[[map]]]]
属性はどうも使いにくい。

[20] 単なる案内のために使った例
[PRE(HTML example code)[
<div>
<map name="introLinks" id="introLinks" title="Introductory Links">
<div class="banner">
<span class="invisible"><a class="bannerLink" title="Skip introductory links and the mission statement" href="#technologies" shape="rect">Skip to Technologies</a> |</span> <a class="bannerLink" title="W3C Activities" accesskey="A" href="/Consortium/activities" shape="rect">Activities</a> | <a class="bannerLink" title="Technical Reports and Recommendations" accesskey="T" href="/TR/" shape="rect">Technical Reports</a> | <a class="bannerLink" title="Alphabetical Site Index" accesskey="S" href="/Consortium/siteindex" shape="rect">Site Index</a> | <a class="bannerLink" title="Help for new visitors" accesskey="N" href="/Consortium/new-to-w3c" shape="rect">New
Visitors</a> | <a class="bannerLink" title="About W3C" accesskey="B" href="/Consortium/" shape="rect">About W3C</a> | <a class="bannerLink" title="Join W3C" accesskey="J" href="/Consortium/join" shape="rect">Join W3C</a> |
<a class="bannerLink" title="Contact W3C" accesskey="C" href="/Consortium/contact" shape="rect">Contact W3C</a>
</div>
</map>
</div>
]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月現在)
<http://www.w3.org/#introLinks>

[22]
[PRE(HTML example code)[
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 6.5.0.0 for Windows">
[INS[...]]
<P><IMG src="kyoto.gif" width="661" height="622" border="0" usemap="#kyoto"></P>
<MAP name="kyoto">
  <AREA href="../../../index.html" target="_top" shape="rect" coords="20,20,208,76" alt="旅行.Infoへ">
  <AREA href="../pdf/kyoto.pdf" target="_blank" shape="rect" coords="114,103,207,126" alt="PDF版を開く">
  <AREA shape="default" nohref>
</MAP>
[INS[...]]
]PRE]

;; [CITE[京都近郊鉄道路線図]] (2006年1月付け)
<http://www.ryoko.info/rosen/train/data/kyoto.html>

[25]
[CITE@en-gb[Nora Radcliffe]] ([CODE[2007-08-15 10:22:16 +09:00]] 版) <http://www.noraradcliffe.co.uk/>

>
[PRE(HTML example code)[
<td id="navigation" bgcolor="#cccccc" width="150" align="center" valign="top">
<map id="navigationmenu" title="Navigation Menu">
<table id="menu" border="1" cellspacing="0" cellpadding="2">
[INS[...]]
<a href="other.html">Other party sites</a>.
</p>
</map>
</td>
]PRE]

([[名無しさん]])

[[#comment]]


** メモ

[23]
[CITE@en[HTML-Image map Creator WYSIWYG - uses AJAX]] ([CODE[2006-12-29 03:23:59 +09:00]] 版) <http://www.kolchose.org/simon/ajaximagemapcreator/>
([[名無しさん]] [WEAK[2007-01-06 04:29:33 +00:00]])

[24]
[CITE@en[RFC 4482 CIPID: Contact Information for the Presence Information Data Format]] ([CODE[2007-01-22 23:57:56 +09:00]] 版) <http://tools.ietf.org/html/rfc4482#section-3.5>
([[名無しさん]] [WEAK[2007-01-27 13:03:49 +00:00]])

[26]
[[HTML 5]], [[WinIE 7]], [[Opera]] 9, [[Safari]] 3 では
[CODE(HTMLe)@en[[[map]]]] [[要素]]の中に [CODE(HTMLe)@en[[[map]]]]
[[開始タグ]]が現れると入れ子の [CODE(HTMLe)@en[[[map]]]]
[[要素]]とみなしますが、
[[Firefox]] 3 だけは [CODE(HTMLe)@en[[[map]]]]
[[終了タグ]]を勝手に補って、外側の [CODE(HTMLe)@en[[[map]]]]
[[要素]]を閉じてしまいます。
([[名無しさん]])


[27]
[CODE(HTMLe)@en[[[map]]]] [[要素]]が入れ子になっている場合、
[[HTML 5]] も4ブラウザもすべて、
内側の [CODE(HTMLe)@en[[[map]]]] [[要素]]の[[子孫]]である [CODE(HTMLe)@en[[[area]]]]
[[要素]]は外側の [CODE(HTMLe)@en[[[map]]]] [[要素]]にも内側にも両方共に関連付けます。

;;
[CITE[Index of /~wakaba/-temp/test/html/imagemaps/nested-maps]] ([TIME[2008-08-31 16:27:29 +09:00]] 版) <http://suika.fam.cx/~wakaba/-temp/test/html/imagemaps/nested-maps/>

([[名無しさん]])


[[#comment]]


* メモ

[30] [CITE@en[(X)HTML5 Tracking]]
([TIME[2009-10-25 19:20:24 +09:00]] 版)
<http://html5.org/tools/web-apps-tracker?from=4334&to=4335>

[31] [CITE@en-US[Techniques for WCAG 2.0]]
( ([TIME[2012-01-04 03:18:29 +09:00]] 版))
<http://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/complete.html#H50>

[32] [CITE[Welcome to Netscape Navigator Version 2.0]]
( ([TIME[2014-04-07 08:48:56 +09:00]] 版))
<http://web.archive.org/web/20030202175634/http://wp.netscape.com/eng/mozilla/2.0/relnotes/windows-2.0.html#Images>

[FIG(quote)[
[FIGCAPTION[
[33] [CITE[tags supported by Emacs/W3]]
([TIME[2015-06-18 17:20:05 +09:00]] 版)
<http://www.tk.airnet.ne.jp/nagae/jp/comp/mule/w3/tags.html>
]FIGCAPTION]

> クリッカブルマップが出てくると,厄介です. Emacs-W3 では,クライアント側で処理するものには対応しています. 画像の上でクリックするのではなく, 選択肢の中から選ぶかたちになります.

]FIG]