Netscape2.0で採用されたNetsape独自のImageMapです。座標データの
処理や進むページの決定をすべてbrowser内で行いCGIを一切使いません。
そのため次のページに進む速さが格段に速いです。
これの作り方は簡単ですが、他のbrowserでは機能しないかもしれません。
またHTML3規格では別な方法でClient Side Image Mapを規格しているので
この方法には汎用性と将来性はあまりないでしょう。なおNetscape3.0は
HTML3規格を完全にはサポートしていません。
次のようにImageMapをページに貼ります。
<IMG SRC="imagemap.gif" USEMAP="#csimap">このUSEMAPオプションが Client Side Image Mapを意味しています。 USEMAPに領域座標データを記述したマップの名前のURLを記します。 この書式はA HREFやA NAMEでのURLの指定方法と同じです。
次にそのマップを作成します。 USEMAPで指定したページに(この例では同ページに)次のように 記述します。
<MAP NAME="csimap">MAPタグのNAMEオプションにマップ名を記します。
<AREA SHAPE="RECT" COORDS="0, 0,255, 63" HREF="whatscgi.html">
<AREA SHAPE="RECT" COORDS="0, 64,255,127" HREF="showtime.html">
<AREA SHAPE="RECT" COORDS="0,128,255,191" HREF="download.html">
<AREA SHAPE="RECT" COORDS="0,192,255,255" HREF="ssimgmap.html">
</MAP>
| SHAPE="RECT" | COORDS="X_lt,Y_lt,X_rb,Y_rb" |
| SHAPE="CIRCLE" | COORDS="X_c,Y_c,R" |
| SHAPE="POLYGON" | COORDS="X_1,Y_1,X_2,Y_2,...,X_n,Y_n" |
Client Side Image Mapは以上で作られます。例の結果を示します。
下の絵をクリックしてみて下さい。
USEMAPによるClient Side Image Mapは Netscape2.0以降以外のbrowserでは 機能しないかもしれません。そのようなbrowserでの閲覧者への対応を とっておくことが必要です。
次のようにすることでImapMapを Serer SideでもClient Sideでも 機能できるようになります。
<a href="imagemap.cgi"><img src="imagemap.gif" ISMAP USEMAP="#csimap"></a>USEMAPを解釈できるbrowserでは Client Sideを使用します。 解釈できないbrowserでは無視して、Serer Sideを使用します。
マップはAタグでくるめば、MAPタグを解釈しないbrowserでは 通常のアンカーとして利用できます。 各AREAタグの後ろにアンカー文字列を記しておきます。
<A>このようにして Client Side Image Map と Server Side Image Map は 共存することができます。
<MAP NAME="csimap">
<AREA SHAPE="RECT" COORDS="0, 0,255, 63" HREF="whatscgi.html"> Chapter 1
<AREA SHAPE="RECT" COORDS="0, 64,255,127" HREF="showtime.html"> Chapter 2
</MAP>
</A>