[Up] [Next] [Previous]

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

クリッカブルマップはWWWサーバ側で、imagemap と呼ばれるソフトウェアが必 要であったため、クリッカブルマップをサポートした WWW サーバー以外の場 所(例えば、ローカルファイルや FTP)に置いても使用できませんでしたが、 Spyglass 社で、HTML ページにマッ プ情報を記述してクリッカブルマップ機能をブラウザ自身がローカルに実行で きるよう、新たなタグを拡張しました。この機能はが Netscape 2.0 や Microsoft Explorer でも使用できるようになっています。なお、仕様が Internet Draft として、公開されています。

James L. Seidman / A Proposed Extension to HTML: Client-Side Image Maps, December 1, 1995.
クライアントサイド・クリッカブルマップは <IMG ISMAP>と 同じように IMGタグに USEMAP属性を付加することによって、 使用できます。そして、座標とURLの対応を記述したマップの作成には、 <MAP>タグを使用します。
<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属性によって、隠すこともできます。

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

<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で記述すれば、除外したい部分だけハイパー リンクポイントとなりません。()

例えば、次のように作成します。この例では、IMGタグを Aタグで囲んでいま す。クライアントサイドクリッカブルマップをサポートしていないブラウザが あれば、図全体がハイパーリンクポイントとなります。

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

クライアントサイドイメージマップの場合、マ ウスをポイントする前に、ハイパーリンクの先がわかります。
NOHREF の例として次のようなドーナツ状のハイパーリ ンクポイントを作ってみました。まず中央の小さな円を NOHREF で登録し、全 体の円をハイパーリンクポイントとして登録します。

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


[Up] [Next] [Previous]