クライアントサイド・ クリッカブルマップ

James L. Seidman / A Proposed Extension to HTML: Client-Side Image Maps, December 1, 1995.

<IMG SRC="image_url" USEMAP="mapname">

USEMAPでマップ名を記述します。マップ名は、

map_file#map_name

のようになります。map_fileはURL形式で記述できるため、リ モートホストのファイルも指定できます。また、同一文書内にマップ がある場合は省略します。map_nameは<MAP>＝ タグのNAME属性で指定した名前です。

同一文書: <IMG SRC="image_url" USEMAP=map>
別の文書: <IMG SRC="image_url" USEMAP=mapfile.html#map>
リモートホスト: <IMG SRC="image_url" USEMAP=http://foo.co.jp/mapfile.html#map>
       

USEMAP を使用すると、イメージの回りがハイパーリンクされたように 色が変わります。BORDER属性によって、隠すこともできます。

なお、サーバ側のクリッカブルマップ機能にも対応できるように、 USEMAPはISMAPと一緒に用いても構いません。例え ば、下記のように両方を記述した場合、

<IMG SRC="image.gif" USEMAP="map" ISMAP>
       

クライアント、サーバサイドクリッカブルマップ機能をサポートして いるブラウザはクライアントサイドが優先されます。しかし、サーバ サイドマップ機能しかサポートしていないブラウザに対応させる場合 は、両方記述しておく方が親切です。

<MAP NAME="MAPNAME">〜 </MAP>

マップファイルを指定します。MAPタグの中に次のAREAタグを記述しま す。

<AREA [SHAPE="shape"] COORDS=" x,y,..." [HREF="reference"] [NOHREF]>

クリッカブルマップのデータを作成します。shapeはクリック 範囲の形を指定し、四角(RECT)・円(CIRCLE)・多角形(POLYGON)が可能 です。SHAPEが省略されていれば、四角(RECT)が使用されま す。COORDSは、それぞれの形の座標を記述します。四角の場 合、左上と右下の二点の座標(図の左上隅が(0,0))を記述し、円の場合 は中央の座標(X,Y)と半径(Radius)を記述します。多角形の場合はそれ ぞれの座標を一筆書きになるよう記述します(始点や方向は関係ありま せん)。範囲が重なった場合、最初の範囲が優先されます。

HREFはクリックした時のハイパーリンク先を記述します。そ して、NOHREFは何も実行しない事を指定します。

この NOHREF は、例えばクリック範囲を重ね書きし、ある部分だけハ イパーリンクを除外したい場合等に用いることができます。マップは 最初の行から評価されるので、優先したい範囲を前に記述します。 ある部分だけ除外するには、まず除外したい範囲(NOHREF)を記述 し、次に範囲全体をHREFで記述すれば、除外したい部分だけハイパー リンクポイントとなりません。(例)

<MAP NAME=toolbar>
<AREA SHAPE=circle COORDS="33,25,20" HREF="http://www.lab.kdd.co.jp/">
<AREA COORDS="79,10,135,43" HREF="http://w3.lab.kdd.co.jp/">
<AREA COORDS="230,8,286,43" HREF="http://holmes.inoc.imnet.ad.jp/">
</MAP>
<A HREF="imagemap.html"><IMG SRC="img/toolbar.gif" USEMAP="#toolbar"></A>

クライアントサイドイメージマップの場合、マ ウスをポイントする前に、ハイパーリンクの先がわかります。

<MAP NAME=donatsu>
<AREA SHAPE=circle COORDS="80,80,30" NOHREF>
<AREA SHAPE=circle COORDS="80,80,80" HREF="http://www.kdd.co.jp/">
</MAP>
<IMG BORDER=0 SRC="img/donatsu.gif" USEMAP="#donatsu">