map 要素型 (HTML, XHTML 1)

[1] HTML の map 要素型の要素は、 クライアント側画像写像 (や他の誘導機構) を定義します。

元々画像写像のために定義された要素型ですが、 画像とは関係なしに一般の誘導ナビゲーションのために使うことができます HTML 4.01 13.6.1。

[3] 仕様書:

[2]

名前空間
http://www.w3.org/1999/xhtml
局所名
map
開始タグ
必須
終了タグ
必須
分類
特殊な行内水準要素
内容模型
(area | %block;)+
出現できる文脈
%inline な文脈 (歴史的変遷: https://suika.suikawiki.org/www/2004/html/classes)
属性
属性名属性値既定値説明出典
class級[HTML4] %coreattr
dir書字方向[HTML4] %i18n
id一意識別子[HTML4] %coreattr
lang自然言語[HTML4] %i18n
xml:lang自然言語[XHTML1]
name画像写像名[HTML 4]
onclick[HTML4] %events
ondblclick[HTML4] %events
onkeydown[HTML4] %events
onkeypress[HTML4] %events
onkeyup[HTML4] %events
onmousedown[HTML4] %events
onmousemove[HTML4] %events
onmouseout[HTML4] %events
onmouseover[HTML4] %events
onmouseup[HTML4] %events
styleスタイル情報[HTML4] %coreattr
title注釈的題[HTML4] %coreattr

内容

[6] map 要素の内容としては2種類のものを入れることができます。

area 要素
1つの area 要素が1つの領域を定義します。 普通 UA は area 要素をレンダリングしません。 強制空要素なので、 HTML 2.0 など古い仕様・実装とは非互換です。
ブロック水準要素
この内容は領域を定義する a 要素を含むべきです。 UA はブロック水準要素をレンダリングするべきです HTML 4.01 13.6.1 (以前はしてもよいとされていました HTML 4.0 13.6.1)。 HTML 4 で追加された方法ですが、より accessible なこちらの方法が推奨されています。

[8] 著者は、すべての領域を area 要素で定義するか、すべてをブロック水準要素で定義するか、 すべてを両方で定義するかにするべきです。 こうすれば新旧 UA で幸せになれます。 混在時は area をすべて無視しなければなりません。 HTML 4.01 13.6.1

2つ以上の範囲が重なっているときには、文書順で最初のものが優先されます (利用者の入力を受取ります)。

[21] >>8

(原文も) やや曖昧な気がしますが、重なる部分を持つ範囲が複数定義されている時は、重なっている部分についてはじめのものが使われる、ということでよいのでしょうかね?

(名無しさん)

使用できる文脈

[15] HTML 4 において map 要素は行内要素でありながら、 内容としては area 要素の他ブロック水準要素も認められます。 object 要素と並んでブロック水準要素の内側に行内要素という構造を逸脱した存在になっています。

[16] 元々 map 要素は area 要素と組合せる方法しか用意されていませんでした。 area は強制空要素型で、関連付けられた img 要素上の領域を作成する以外は文書構造やレンダリングにおいて何の意味も持ちませんでした。 この状態に於いては map 要素をどこに書こうが問題はありませんでした。 (そういう場合は head に入れるのがよかったのかもしれません。あるいは img が強制空要素でなければその中に書ければよかったかもしれません。)

[17] しかし、 HTML 4 でブロック水準要素が map 要素の内容に認められたために >>15 のようなおかしなことが起こりました。しかも画像写像に限らず navigation 一般に semantics が拡大されたために、 >>14 のような不都合が生じました。ブロック水準要素を内容として認めるなら map]] 自体もブロック水準要素にするべきだったのです。 互換性の問題があるとすれば、移行用DTD では行内要素としても使えることにすればよかったのです。

レンダリング

[7] UA は、普通 map 要素の内容の area 要素はレンダリングせず、ブロック水準要素はレンダリングします。

アクセス可能性

[18] ブロック水準要素の内容: 元々 map 要素の内容としては強制空要素の area しか使えませんでしたが、 アクセス可能性の向上のために任意のブロック水準要素が使えるようになりました。 しかしどれだけ利用者エージェントが対応しているかはよくわかっていません。 そのためかあまり使われないので、 HTML 5 には入らない見込みです (>>14)。

[19] 代替内容: map と area による画像写像は、 対応していない利用者エージェントや画像を表示できない利用者エージェントでうまく扱えないという問題があります。 著者は、 area によるリンクと実質的に同じものを a でも別途提供するべきです。 利用者エージェントは、 area によるリンクを画像がなくてもたどれる手段やその存在自体を通知する方法を用意するべきです。

歴史

[40] Extensions to HTML 3.0, , http://web.archive.org/web/19970613213431/http://www1.netscape.com/assist/net_sites/html_extensions_3.html

[41] HTML TADS deviations from standard HTML specifications, , https://www.tads.org/t3doc/doc/htmltads/deviate.htm#deviations

XHTML2

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

- XHTML Client-Side Image Map Module ( 版) http://www.w3.org/TR/2002/WD-xhtml2-20021218/mod-csImgMap.html#sec_11.1.

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

XHTML 2.0 ( 版) http://www.w3.org/TR/2003/WD-xhtml2-20030506/

MAP 要素 (DjVu XML)

[273] DjVu XML には HTML の map 要素から派生した MAP 要素がありました。

関連

[4] map 要素で定義した画像写像は、 usemap 属性を使って参照 (使用) できます。

[5] 画像写像の個々の領域は a 要素や area 要素によって定義します。

[12] map 要素の参照と HTML vs XHTML と id vs name の問題

Bug 109445 - Referencing a client-side image map declared with id attribute doesn't work https://bugzilla.mozilla.org/show_bug.cgi?id=109445

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

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

例

[9] object + 画像写像の例

<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>

(HTML 4 仕様書より、改)

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

[10] object + 画像写像の例

<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>

(HTML 4 仕様書より、改)

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

[11] 複数の object で画像写像を共有する例

<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>

(HTML 4 仕様書より、改)

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

   <div><map id="nav"><ul>
     <li><a href="/">Home</a></li>
     ...
     <li><a>Current page</a></li>
     ...
     <li><a href="/contact/">Contact</a></li>
   </ul></map></div>

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

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

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

<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>

>>14 と同じく、画像写像とは関係なく案内のための文字 base な内容。無意味な div, map, div の三重奏には心打たれます。 どう考えても欠陥仕様だけど自分のところで作った以上律儀に守っているお茶目な W3C ったらもうwwww

出典: World Wide Web Consortium (2005年7月現在) http://www.w3.org/#introLinks

[22]

<!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">
...
<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>
...

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

[25] Nora Radcliffe (2007-08-15 10:22:16 +09:00 版) http://www.noraradcliffe.co.uk/

<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">
...
<a href="other.html">Other party sites</a>.
</p>
</map>
</td>

[43] FreeBSD Ports ���쥯����� ����, , https://grumbeer.dyndns.org/ftp/cdroms/freebsd/freebsd-2.2.6-2/www/ja_JP.EUC/ports/master-index.html

[44] >>43 一番上の画像が画像写像。

メモ

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

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

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

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

Index of /~wakaba/-temp/test/html/imagemaps/nested-maps ( 版) https://suika.suikawiki.org/~wakaba/-temp/test/html/imagemaps/nested-maps/

(名無しさん)

メモ

[30] (X)HTML5 Tracking ( 版) http://html5.org/tools/web-apps-tracker?from=4334&to=4335

[31] Techniques for WCAG 2.0 ( ( 版)) http://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/complete.html#H50

[32] Welcome to Netscape Navigator Version 2.0 ( ( 版)) http://web.archive.org/web/20030202175634/http://wp.netscape.com/eng/mozilla/2.0/relnotes/windows-2.0.html#Images

[33] tags supported by Emacs/W3 ( 版) http://www.tk.airnet.ne.jp/nagae/jp/comp/mule/w3/tags.html

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

[34] ( 版) http://www.k4.dion.ne.jp/~maccijaz/i-schedule.html

<div align="left">

<h3><a href="i-top.html"><img src="i-images/buta1..gif" width="126" height="83" usemap="#Map5" align="left"></a>

<map name="Map5">

<area shape="rect" coords="10,11,127,75" href="http://www.k4.dion.ne.jp/~maccijaz/i-top.html">

</map>

Schedule

</h3>

<div align="center">

<p align="left"><img src="i-images/keitai7.gif" width="340" height="206" align="absmiddle">

<map name="Map">

<area shape="rect" coords="312,184,333,193" href="#">

<area shape="rect" coords="0,6,6,14" href="#">

<area shape="rect" coords="2,2,8,10" href="#">

</map>

<br>

</p>

</div>

[35] The Art of Designing and Marking Up Email Signatures ( 版) http://www.sitepoint.com/the-art-of-designing-and-marking-up-email-signatures/

Don’t use image mapping: Image mapping used to be a great way of incorporating multiple hyperlinks in a single graphic in an email signature. It works well with everything except for Outlook 2010. If you will have users installing signatures into Outlook 2010, image mapping built into their email signature will not work. (It can seem like it works, but it doesn’t — don’t be fooled!)

[36] ( 版) http://shonan-kakurega.com/

<map name="Map">

<area shape="rect" coords="3,1,187,14" href="../company.html" alt="湘南隠れが不動産とは">

<area shape="rect" coords="213,0,413,13" href="../nagare.html" alt="湘南の隠れ家を見つけるまで">

<area shape="rect" coords="328,20,413,37" href="../toi.html" alt="お問い合わせ">

<area shape="rect" coords="4,21,129,36" href="../soudan.html" alt="売却・貸出のご案内">

<area shape="rect" coords="253,20,319,36" href="../what-shonan.html" alt="湘南とは">

<area shape="rect" coords="136,20,235,37" href="keisai.html" alt="湘南の不動産|物件掲載のご案内">

</map>

<div id="header"><a href="../index.php"><img src="../img/common/header_r2_c1_s1.gif" alt="湘南隠れ家不動産" hspace="0" vspace="0" border="0" align="left"></a><img src="../img/common/header_r2_c2.gif" width="436" height="40" hspace="0" vspace="0" border="0" usemap="#Map"><br>

<a href="../magazin.html"><img src="../img/common/header_r3_c2.gif" alt="湘南の住まいは隠れ家だ" width="436" height="165" hspace="0" vspace="0" border="0"></a></div>

[37] Fix #227: clarify conformance vs. parsing for hash-name references · whatwg/html@7f1a845 ( 版) https://github.com/whatwg/html/commit/7f1a8457559316f060be55298bd5656baba19644

[38] dfn what it means for elements to be “referenced” (sideshowbarker著, ) https://github.com/whatwg/html/commit/d0872abf29373f284c93434875e2e30d12602081

[42] Maps4HTML

[39] Please add <map> to the list of elements that support attachShadow(init) · Issue #734 · w3c/webcomponents () https://github.com/w3c/webcomponents/issues/734