img 要素、input 要素 ismap 属性 (HTML, XHTML 1)

[4] HTML の img 要素および input 要素の ismap 属性は、 画像が鯖側画像写像であることを示します。

input の場合は、 type 属性が image の時に使います。

[5] 仕様書:

属性値

[8] この属性は真偽値属性です。 指定すれば真 (鯖側画像写像)、指定しなければ偽 (非鯖側画像写像) になります。

提出

[9] 利用者が画像をかちっることでリンクを活性化した場合、 画面上の座標を鯖に直接送ります。座標は画像に対する画素値で、 画素とその計測法の定義は CSS 1 によります。 HTML 4

[11] かちった座標は、次の方法で鯖に送られます。 HTML 4

  1. 元になる URI を用意 (a href から)。
  2. ? を付け足す
  3. x 座標、,、y 座標を付け足す
  4. できた新しい URI によりリンクをたどる

(この定義の仕方だと、 href にもとから query がついていたら困ります。つけてはいけないのでしょうか。 それとも UA はとらないといけないのでしょうか。)

[18] input の場合のことがちゃんと書かれていません。 フォームの章には書いてあるのでしょうが。。。 と思ったら書いてありません。

type が image なのは画像提出ボタンで、元々フォームを提出するための鯖側画像写像としての機能を持っています。 ismap 属性を指定すると何が起こるのかは不明です。

[20] ところで、座標は 0 から始まるのでしょうか、 1 からでしょうか。

リンク先 URI について

[23] リンク先の URI について、 HTML 4 は >>11 のようにしか述べていませんが、 1996年に発表された W3C NOTE >>22 は、 query の使用を禁じていました。 そして、 UA には誤り処理として query を削った URI に座標を付け加えることと、 (情報の劣化が起こるので) 利用者に報告することを求めていました。 なお、素片識別子の使用は認めており、 (当然) 座標は path と素片識別子の間に挿入されることが述べられています。

[24] しかし、 HTML 4 も >>22 の NOTE も、 http: 以外の URI scheme には触れていません。

[25] 但し、 >>22 の NOTE は当時のほとんどの UA が素片識別子付きに対応していないと注意しています。 (名無しさん)

座標を選択しない場合

[12] 利用者が座標を選択する手段を有しない UA では、座標 0,0 を送るべきです。 HTML 4

[21] HTML 4 より少し前、 1996年に発表された W3C NOTE >>22 は、画像を表示しない・できない UA は http://some.domain.example/path/resource のように query のまったくない URI を使うべきであるとし、 Lynx など既存の UA は座標 (0, 0) を送るので、鯖側はそれにも対応することをすすめていました。

[22] Imagemapped Images and Image-Incapable User Agents, http://www.w3.org/TR/NOTE-imagemap, 発表当時の URI は http://www.w3.org/pub/WWW/TR/NOTE-imagemap-961127。 Status of this document によれば現在の W3C WD のような位置付けだったらしいのですが、 2004年現在、 http://www.w3.org/TR/ によれば Working Group Note に分類されています。同時期の他の HTML 系 WD とは異なり、 直接 HTML 4 仕様書に取込まれてはいないようです。

input 要素の ismap 属性

[19] HTML 4.0 には input 要素に ismap 属性がありませんでしたが、なぜか HTML 4.01 で追加されました。

HTML 4 13.6.2 の説明は、 HTML 4.0 FE の時には、 img でも input でも鯖側画像写像を使う時には ismap が要るようなことが書かれていましたが、 SE で img の時だけ要ると修正されました。 HTML 4.01 で追加したのはこの間違った文章との後方互換性のため(藁) かもしれませんが、全然説明がありません。不親切だなあ。

歴史

大域属性としての使用

[32] XHTML2 では src の大域属性化に伴い ismap 属性も大域属性となりました。

- XHTML Attribute Collections ( 版) http://www.w3.org/TR/2002/WD-xhtml2-20021211/mod-attribute-collections.html#adef_attribute-collections_ismap

他との関係

[7] ismap 属性が定義されている要素型は img と input だけです。 鯖側画像写像はあまりすすめられないという事情からか、 object 要素には定義されていません (usemap はあるのに)。

なお、 input で ismap にできるのは type が image のときのみです。

[13] img の先祖に a がない場合どうなるのかは HTML 4 仕様書に書かれていません。

[14] HTML 4 仕様書は触れていませんが、 クライアント側画像写像ができてすぐの頃には usemap と ismap の両方を指定することがありました。 (が、面倒だし、多くの WWW ブラウザはクライアント側に対応したので習慣にはなりませんでした。)

[16] >>14 と書いたけど検索してみると両方併用した説明が一杯出てきます。意外とあったのかも。

不思議解釈

[17] ismap をとにかく画像写像のときはつけるべし の意味だと勘違いしている人も沢山いる悪寒。

参考: TAG index/過去ログ/ クリッカブルマップ http://www.tagindex.com/kakolog/q1bbs/401/575.html

例

[10] 

<P><A href="http://www.acme.example/cgi-bin/competition">
        <IMG src="game" ismap alt="target"></A>

(HTML 4 仕様書より、改)

この例で、利用者が座標 (x, y) = (10, 27) をかちったとすると、終点 URI は http://www.acme.example/cgi-bin/competition?10,27 になります。

実利用例

[39] Tambhi, AntoPeter, , https://web.archive.org/web/19981202150430/http://www.tamilcinema.com/tamilbooks.htm

<table width="98%">
<tr>
<center>
<td width="130"></td>
<dt>
<map name="svc3"><area shape="rect" coords="0,0,250,45" alt="Download Tamil Font for Tamilcinema" href="fonts/amudham.htm"></map><a href="svc3.map"><img ismap src="/web/19981202150430im_/http://www.tamilcinema.com/dload.JPG" alt="FREE Amutham Tamil Font" border="0" usemap="#svc3" height="63" width="348"></a>&nbsp;</dt>
</td>
</center>
</tr>

</table>

[40] Internews Armenia, , https://web.archive.org/web/19990125100306/http://www.internews.am/

<p align="center"><!--webbot bot="ImageMap" rectangle="(306,236) (390, 249)  textonly/main.htm" rectangle="(305,222) (389, 235)  russian/Intro/Fr_Intro.htm##_parent" rectangle="(304,208) (388, 221)  english/Intro/Fr_Intro.htm##_parent" src="images/Newpage/main.gif" alt="Internews Armenia" border="0" startspan --><map name="FrontPageMap"><area shape="RECT" coords="306, 236, 390, 249" href="textonly/main.htm"><area shape="RECT" coords="305, 222, 389, 235" href="russian/Intro/Fr_Intro.htm" target="_parent"><area shape="RECT" coords="304, 208, 388, 221" href="english/Intro/Fr_Intro.htm" target="_parent"></map><a href="_vti_bin/shtml.dll/Default.htm/map"><img ismap usemap="#FrontPageMap" border="0" height="293" alt="Internews Armenia" src="/web/19990125100306im_/http://www.internews.am/images/Newpage/main.gif" width="424"></a><!--webbot bot="ImageMap" endspan i-checksum="51462" --></p>

[41] Present si istorie, , http://web.archive.org/web/20010424190924/http://www.trm.md/istorie.htm

    <td width="560" valign="top" height="22" colspan="2"><p align="center"><a name="top1"></a><!--webbot bot="ImageMap" rectangle="(426,9) (473, 52)  default.asp##_top" src="Top_hist.gif" WIDTH="491" HEIGHT="57" border="0" startspan --><map name="FrontPageMap"><area shape="RECT" coords="426, 9, 473, 52" href="default.asp" target="_top"></map><a href="_vti_bin/shtml.dll/istorie.htm/map"><img ismap usemap="#FrontPageMap" border="0" height="57" src="/web/20010424190924im_/http://www.trm.md/Top_hist.gif" width="491"></a><!--webbot bot="ImageMap" endspan i-checksum="5343" --></td>

[42] Macromedia: Director Xtras - QuickDraw 3D Xtra from Macromedia and Apple, https://web.archive.org/web/19961027071628id_/http://www.macromedia.com/software/xtras/director/qd3d.html

<body bgcolor="#FFFFFF" text="#333333" link="#FF0000" alink="#000000" vlink="#330066">

<map name="headermap">

<area coords="15,9,50,46" href="/">
<area coords="0,53,65,78" href="/shockwave/">
<area coords="0,88,64,112" href="/software/">
<area coords="0,127,64,150" href="/macromedia/sales.html">
<area coords="0,163,64,188" href="/support/techsupport.html">
<area coords="0,200,64,224" href="/support/reference.html">
<area coords="0,235,64,258" href="/support/programs.html">
<area coords="0,270,64,293" href="/macromedia/">
<area coords="14,299,52,337" href="/info/">

</map>

<a href="/images/header.map">
<img src="/images/header.gif" width=64 height=345 align=left border=0 USEMAP="#headermap" ISMAP alt="navigation bar"></a>

メモ

[6] 鯖側画像写像は、クライアント側画像写像よりも先に開発・実装されましたが、 access 性に関する問題点がある上、 鯖側での設定が必要である面倒臭さからほとんど用いられなくなっています。

1999年の HTML 4 勧告もクライアント側画像写像をすすめています。 ただし、 ismap は非推奨とまではされていません。 鯖側画像写像は画像写像がクライアント側画像写像にするには複雑すぎる場合には使えるかもと言っています。

[1] こんなの見かけました: <a href="javascript:foo();"><img ismap/></a>。 う〜ん。。。

[2] そこいらの WWWブラウザでは >>1 はもちろん動かないわけだ。 (ていうかそもそも query が存在する URI scheme じゃないと話にならんよね。)

[3] でも query があるからといって mailto: なんかで使えたりしたらたまらんわな。

[15] a のリンク先を静的な (鯖側で画像写像やスクリプト等でない) HTML 文書にして、 JavaScript で query をみて何かするという技法がありました。 (あまり流行らなかったようですが、 さして使い道がないからでしょう。)

例: JavaScript Guide http://osr5doc.sco.com:1997/Internet/FastTrack/javascript/advtopic.htm#1006230 (2000年8月最終修正)

(名無しさん)

[26] 日々是開発: SQS Development(2006-01-09) http://sqs.cmr.sfc.keio.ac.jp/tdiary/?date=20060109#p01

鯖側画像写像にも、まだ、純粋に画像の1点を選択させるだけの使い道はあるのか。。。 (名無しさん 2006-01-10 01:39:48 +00:00)

[27] EMail Msg <9305180650.AA03223@wintermute.ncsa.uiuc.edu> (2007-07-01 04:22:17 +09:00 版) http://ksi.cpsc.ucalgary.ca/archives/WWW-TALK/www-talk-1993q2.messages/341.html (名無しさん)

[28] SpaceWalk Hypermedia Demo (1997-03-12 07:31:47 +09:00 版) http://web.archive.org/web/19990218153913/www.earth.com/server/walk/walk.html (名無しさん)

[29] EMail Msg <9308102156.AA06138@austin.BSDI.COM> (2007-07-01 04:30:40 +09:00 版) http://ksi.cpsc.ucalgary.ca/archives/WWW-TALK/www-talk-1993q3.messages/459.html (名無しさん)

[30] EMail Msg <9305272008.AA26764@austin.BSDI.COM> (2007-07-01 04:35:30 +09:00 版) http://ksi.cpsc.ucalgary.ca/archives/WWW-TALK/www-talk-1993q2.messages/401.html (名無しさん)

[31] EMail Msg <9306050318.AA10442@wintermute.ncsa.uiuc.edu> (2007-07-01 05:00:05 +09:00 版) http://ksi.cpsc.ucalgary.ca/archives/WWW-TALK/www-talk-1993q2.messages/436.html

[33] WWW-Talk Apr-Jun 1993: Re: Keeping HTML Simple & Format negotiation between Browser & Server ( ( 版)) http://1997.webhistory.org/www.lists/www-talk.1993q2/0417.html

[34] WWW-Talk Apr-Jun 1993: IMG extension for Mosaic 1.1 ( ( 版)) http://1997.webhistory.org/www.lists/www-talk.1993q2/0343.html

[35] Web Applications 1.0 r7816 Mention <input ismap> ( ( 版)) http://html5.org/tools/web-apps-tracker?from=7815&to=7816

[36] ncsa-mosaic/CHANGES at master · alandipert/ncsa-mosaic ( ( 版)) https://github.com/alandipert/ncsa-mosaic/blob/master/CHANGES#L898

[37] Fix #438: Make <img ismap> x/y relative to the image edge · whatwg/html@87c078d ( 版) https://github.com/whatwg/html/commit/87c078dfd7c36d65328db4bb7bfc3c8f411e5997

[38] What should we do for <a href="javascript:"><img ismap></a>? · Issue #3103 · whatwg/html () https://github.com/whatwg/html/issues/3103