* img 要素、input 要素 ismap 属性 (HTML, XHTML 1)

[4] [[HTML]] の [CODE(HTMLe)[[[img]]]] 要素および [CODE(HTMLe)[[[input]]]]
要素の [DFN[[CODE(HTMLa)[ismap]] 属性]]は、
[[画像]]が[[鯖側画像写像]]であることを示します。

[CODE(HTMLe)[input]] の場合は、 [CODE(HTMLa)[[[type]]]]
属性が [CODE(HTML)[[[image]]]] の時に使います。

[5] 仕様書:
- [[HTML 4]]
-- [CITE[13.6.2 Server-side image maps]]
<IW:HTML4:"struct/objects.html#adef-ismap">
-- [CITE[HTML 4 Changes]]
<IW:HTML4:"appendix/changes.html">

** 属性値

[8] この属性は[[真偽値属性]]です。
指定すれば[[真]] (鯖側画像写像)、指定しなければ[[偽]]
(非鯖側画像写像) になります。

[[#comment]]


** 提出

[9] 利用者が画像を[[かちっ]]ることで[[リンク]]を活性化した場合、
画面上の座標を鯖に直接送ります。座標は画像に対する画素値で、
画素とその計測法の定義は [[CSS 1]] によります。 [SRC[HTML 4]]

[11] かちった座標は、次の方法で鯖に送られます。 [SRC[HTML 4]]
= 元になる URI を用意 ([CODE(HTMLe)[[[a]]]] [CODE(HTMLa)[[[href]]]] から)。
= [CODE(URI)[?]] を付け足す
= [VAR[x]] 座標、[CODE(URI)[,]]、[VAR[y]] 座標を付け足す
= できた新しい URI によりリンクをたどる

(この定義の仕方だと、 [CODE(HTMLa)[href]] にもとから [CODE(ABNF)[[[query]]]]
がついていたら困ります。つけてはいけないのでしょうか。
それとも UA はとらないといけないのでしょうか。)

[18]
[CODE(HTMLe)[input]] の場合のことがちゃんと書かれていません。
フォームの章には書いてあるのでしょうが。。。
と思ったら書いてありません。

[CODE(HTMLa)[type]] が [CODE(HTML)[[[image]]]] 
なのは画像提出ボタンで、元々フォームを提出するための鯖側画像写像としての機能を持っています。
[CODE(HTMLa)[ismap]] 属性を指定すると何が起こるのかは不明です。

[20]
ところで、座標は 0 から始まるのでしょうか、
1 からでしょうか。

[[#comment]]


*** リンク先 URI について

[23] リンク先の URI について、 HTML 4 は >>11 のようにしか述べていませんが、
1996年に発表された W3C [[NOTE]] >>22 は、 [CODE(ABNF)[query]] の使用を禁じていました。
そして、 UA には誤り処理として [CODE(ABNF)[query]] を削った URI
に座標を付け加えることと、 (情報の劣化が起こるので) 利用者に報告することを求めていました。
なお、[[素片識別子]]の使用は認めており、 (当然) 座標は [CODE(ABNF)[[[path]]]]
と素片識別子の間に挿入されることが述べられています。

[24] しかし、 HTML 4 も >>22 の NOTE も、 [CODE(URI)[[[http]]:]] 以外の
[[URI scheme]] には触れていません。

[25]
但し、 >>22 の NOTE は当時のほとんどの UA が素片識別子付きに対応していないと注意しています。
([[名無しさん]])

[[#comment]]


*** 座標を選択しない場合

[12] 利用者が座標を選択する手段を有しない UA
では、座標 [SAMP(URI)[0,0]] を送るべきです。 [SRC[HTML 4]]

[21] HTML 4 より少し前、 1996年に発表された W3C [[NOTE]] >>22 
は、画像を表示しない・できない UA は
[SAMP(URI)[http://some.domain.example/path/resource]] のように [CODE(ABNF)[query]]
のまったくない URI を使うべきであるとし、 [[Lynx]] など既存の UA
は座標 [CODE(math)[(0, 0)]] を送るので、鯖側はそれにも対応することをすすめていました。

[22] [CITE[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>。
[Q[Status of this document]] によれば現在の W3C [[WD]] のような位置付けだったらしいのですが、
2004年現在、 <http://www.w3.org/TR/> によれば [[Working Group Note]]
に分類されています。同時期の他の HTML 系 WD とは異なり、
直接 HTML 4 仕様書に取込まれてはいないようです。

[[#comment]]


** input 要素の ismap 属性

[19] [[HTML 4.0]] には [CODE(HTMLe)[input]] 要素に [CODE(HTMLa)[ismap]] 
属性がありませんでしたが、なぜか [[HTML 4.01]] で追加されました。

HTML 4 13.6.2 の説明は、 HTML 4.0 [[FE]] の時には、 [CODE(HTMLe)[img]]
でも [CODE(HTMLe)[input]] でも鯖側画像写像を使う時には
[CODE(HTMLa)[ismap]] が要るようなことが書かれていましたが、
[[SE]] で [CODE(HTMLe)[img]] の時だけ要ると修正されました。
HTML 4.01 で追加したのはこの間違った文章との後方互換性のため(藁)
かもしれませんが、全然説明がありません。不親切だなあ。

** 歴史

*** 大域属性としての使用

[32] [[XHTML2]] では [CODE(HTMLa)@en[[[src]]]] の[[大域属性]]化に伴い
[CODE(HTMLa)@en[[[ismap]]]] [[属性]]も[[大域属性]]となりました。

;; [CITE@en[- XHTML Attribute Collections]] ([TIME[2002-12-12 23:58:38 +09:00]] 版) <http://www.w3.org/TR/2002/WD-xhtml2-20021211/mod-attribute-collections.html#adef_attribute-collections_ismap>

** 他との関係

[7] [CODE(HTMLa)[ismap]] 属性が定義されている要素型は
[CODE(HTMLe)[img]] と [CODE(HTMLe)[input]] だけです。
鯖側画像写像はあまりすすめられないという事情からか、
[CODE(HTMLe)[[[object]]]] 要素には定義されていません
([CODE(HTMLa)[[[usemap]]]] はあるのに)。

なお、 [CODE(HTMLe)[input]] で [CODE(HTMLa)[ismap]]
にできるのは [CODE(HTMLa)[[[type]]]] が [CODE(HTML)[[[image]]]]
のときのみです。

[13] [CODE(HTMLe)[img]] の先祖に [CODE(HTMLe)[a]]
がない場合どうなるのかは HTML 4 仕様書に書かれていません。

[14]
HTML 4 仕様書は触れていませんが、
クライアント側画像写像ができてすぐの頃には [CODE(HTMLa)[usemap]] と [CODE(HTMLa)[ismap]] の両方を指定することがありました。
(が、面倒だし、多くの WWW 
ブラウザはクライアント側に対応したので習慣にはなりませんでした。)

[16]
>>14 と書いたけど検索してみると両方併用した説明が一杯出てきます。意外とあったのかも。

[[#comment]]


** 不思議解釈

[17]
[CODE(HTMLe)[ismap]] を[Q[とにかく画像写像のときはつけるべし]]
の意味だと勘違いしている人も沢山いる悪寒。

参考:
''TAG index/過去ログ/ クリッカブルマップ'' <http://www.tagindex.com/kakolog/q1bbs/401/575.html>

[[#comment]]


* 例

[10] 
[PRE(HTML)[
<P><A href="http://www.acme.example/cgi-bin/competition">
        <IMG src="game" ismap alt="target"></A>
]PRE]

[WEAK[(HTML 4 仕様書より、改)]]

この例で、利用者が座標 [CODE(math)[([VAR[x]], [VAR[y]]) = (10, 27)]]
をかちったとすると、終点 URI は
[SAMP(URI)[http://www.acme.example/cgi-bin/competition?10,27]]
になります。

** 実利用例


[39] 
[CITE[Tambhi]], [[AntoPeter]], [TIME[2025-06-22T13:02:34.000Z]], [TIME[1998-12-02T15:22:20.642Z]] <https://web.archive.org/web/19981202150430/http://www.tamilcinema.com/tamilbooks.htm>

>
[PRE[
<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>
]PRE]

[40] [CITE[Internews Armenia]], [TIME[2025-11-12T05:55:00.000Z]], [TIME[1999-01-25T10:08:21.415Z]] <https://web.archive.org/web/19990125100306/http://www.internews.am/>

>
[PRE[
<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>
]PRE]

[41] [CITE[Present si istorie]], [TIME[2025-11-12T14:24:56.000Z]], [TIME[2001-04-24T19:12:01.011Z]] <http://web.archive.org/web/20010424190924/http://www.trm.md/istorie.htm>

>
[PRE[
    <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>
]PRE]

[42] 
[CITE[Macromedia: Director Xtras - QuickDraw 3D Xtra from Macromedia and Apple]], [TIME[2025-11-27T01:01:45.000Z]] <https://web.archive.org/web/19961027071628id_/http://www.macromedia.com/software/xtras/director/qd3d.html>

>
[PRE[
<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>
]PRE]


* メモ

[6] 鯖側画像写像は、[[クライアント側画像写像]]よりも先に開発・実装されましたが、
access 性に関する問題点がある上、
鯖側での設定が必要である面倒臭さからほとんど用いられなくなっています。

1999年の HTML 4 勧告もクライアント側画像写像をすすめています。
ただし、 [CODE(HTMLa)[ismap]] は'''非推奨'''とまではされていません。
[Q[鯖側画像写像は画像写像がクライアント側画像写像にするには複雑すぎる場合には使えるかも]]と言っています。

[1] こんなの見かけました:
[SAMP(HTML)[<[CODE(HTMLe)[a]] [CODE(HTMLa)[href]]="[[javascript]]:foo();"><[CODE(HTMLe)[img]] [CODE(HTMLa)[ismap]]/></[CODE(HTMLe)[a]]>]]。
う〜ん。。。

[2] そこいらの [[WWWブラウザ]]では >>1 はもちろん動かないわけだ。 
(ていうかそもそも [CODE(ABNF)[[[query]]]] が存在する [[URI]] [[scheme]] 
じゃないと話にならんよね。)

[3] でも [CODE(ABNF)[query]] があるからといって [CODE(URI)[[[mailto]]:]] 
なんかで使えたりしたらたまらんわな。

[15]
[CODE(HTMLe)[a]] のリンク先を静的な (鯖側で画像写像やスクリプト等でない) 
HTML 文書にして、 [[JavaScript]]
で [CODE(ABNF)[query]] をみて何かするという技法がありました。
(あまり流行らなかったようですが、
さして使い道がないからでしょう。)

例:
''JavaScript Guide'' <http://osr5doc.sco.com:1997/Internet/FastTrack/javascript/advtopic.htm#1006230>
(2000年8月最終修正)

([[名無しさん]])

[26]
[CITE[日々是開発: SQS Development(2006-01-09)]] 
<http://sqs.cmr.sfc.keio.ac.jp/tdiary/?date=20060109#p01>

[[鯖側画像写像]]にも、まだ、純粋に画像の1点を選択させるだけの使い道はあるのか。。。
([[名無しさん]] [WEAK[2006-01-10 01:39:48 +00:00]])

[27]
[CITE[EMail Msg <9305180650.AA03223@wintermute.ncsa.uiuc.edu>]] ([CODE[2007-07-01 04:22:17 +09:00]] 版) <http://ksi.cpsc.ucalgary.ca/archives/WWW-TALK/www-talk-1993q2.messages/341.html>
([[名無しさん]])

[28]
[CITE[SpaceWalk Hypermedia Demo]] ([CODE[1997-03-12 07:31:47 +09:00]] 版) <http://web.archive.org/web/19990218153913/www.earth.com/server/walk/walk.html>
([[名無しさん]])

[29]
[CITE[EMail Msg <9308102156.AA06138@austin.BSDI.COM>]] ([CODE[2007-07-01 04:30:40 +09:00]] 版) <http://ksi.cpsc.ucalgary.ca/archives/WWW-TALK/www-talk-1993q3.messages/459.html>
([[名無しさん]])

[30]
[CITE[EMail Msg <9305272008.AA26764@austin.BSDI.COM>]] ([CODE[2007-07-01 04:35:30 +09:00]] 版) <http://ksi.cpsc.ucalgary.ca/archives/WWW-TALK/www-talk-1993q2.messages/401.html>
([[名無しさん]])

[31]
[CITE[EMail Msg <9306050318.AA10442@wintermute.ncsa.uiuc.edu>]] ([CODE[2007-07-01 05:00:05 +09:00]] 版) <http://ksi.cpsc.ucalgary.ca/archives/WWW-TALK/www-talk-1993q2.messages/436.html>


[33] [CITE[WWW-Talk Apr-Jun 1993: Re: Keeping HTML Simple & Format negotiation between Browser & Server]]
( ([TIME[2013-03-05 13:24:03 +09:00]] 版))
<http://1997.webhistory.org/www.lists/www-talk.1993q2/0417.html>

[34] [CITE[WWW-Talk Apr-Jun 1993: IMG extension for Mosaic 1.1]]
( ([TIME[2013-03-05 13:25:50 +09:00]] 版))
<http://1997.webhistory.org/www.lists/www-talk.1993q2/0343.html>

[35] [CITE@en[Web Applications 1.0 r7816  Mention <input ismap>]]
( ([TIME[2013-04-12 07:43:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=7815&to=7816>

[36] [CITE[ncsa-mosaic/CHANGES at master · alandipert/ncsa-mosaic]]
( ([TIME[2014-04-07 05:38:27 +09:00]] 版))
<https://github.com/alandipert/ncsa-mosaic/blob/master/CHANGES#L898>

[37] [CITE@en[Fix #438: Make <img ismap> x/y relative to the image edge · whatwg/html@87c078d]]
([TIME[2016-01-20 17:29:23 +09:00]] 版)
<https://github.com/whatwg/html/commit/87c078dfd7c36d65328db4bb7bfc3c8f411e5997>

[38] [CITE@en[What should we do for <a href="javascript:"><img ismap></a>? · Issue #3103 · whatwg/html]]
([TIME[2017-10-09 00:50:55 +09:00]])
<https://github.com/whatwg/html/issues/3103>