## クリッカブルマップ

トップ > 逆引きリファレンス > クリッカブルマップ

#### ■ クリッカブルマップとは

クリッカブルマップは「クリック可能なマップ」の意味です。画像ファイルの、この部分をクリックしたらこのページに、この部分をクリックしたらこのページにと、クリックする箇所によってジャンプ先のページを指定することができます。クリッカブルマップには下記の方法があります。

- 簡易クリッカブルマップ
- サーバサイドクリッカブルマップ
- クライアントサイドクリッカブルマップ

#### ■ 簡易クリッカブルマップ

クリッカブルマップと呼ぶのもおこがましいような方法ですが、単にリンク付きの画像を縦横に並べます。途中で改行されてしまうのを防ぐために <nobr> を指定しています。また、画像と画像の間に隙間があかないように、タグとタグの間（> と < の間）に改行やスペースを用いないようにしています。

    <nobr><a
     href="aa.htm"><img src="aa.gif" border=0 alt="AA"></a><a
     href="bb.htm"><img src="bb.gif" border=0 alt="BB"></a><a
     href="cc.htm"><img src="cc.gif" border=0 alt="CC"></a></nobr>

#### ■ サーバサイドクリッカブルマップ

サーバサイドクリッカブルマップは、どこをクリックしたらどのページにジャンプするという情報をサーバ側に保持する方法です。現在ではあまり使用することは少なくなってきましたが、地図上の移動など領域ではなく、座標に従った処理をする場合に利用されています。

    <a href="xyz.cgi"><img src="map.gif" border=0 ismap></a>

上記の画像をクリックすると、画像の左上を 0, 0 とする座標情報が次の形式で CGI に渡されます。サーバ側にはこの情報を環境変数 QUERY_STRING で読み取り、座標情報に応じた処理結果を返す CGI（上記の例では xyz.cgi）を自作するなどして設置する必要があります。

    smap.cgi?31,76

Webサーバによっては、上記のような CGI を作成しなくてもよいように、サーバ側にマップ情報ファイル（例えば test.map）を設置し、<a href="..."> に test と指定すれば適切に処理してくれるものがあります。CERN 形式と NCSA 方式がありますが、どちらも最近ではあまり利用されていないようです。

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

クライアントサイドクリッカブルマップは、クライアント側で読み込む HTML の指定によってクリッカブルマップを実現する方式です。現在では最もポピュラーな方式です。詳細は <map> を参照してください。

    <img src="map.gif" alt="画像" usemap="#map_TEST"
     border=0 width=243 height=68>
    <map name="map_TEST">
    <area shape="rect" coords="11,16,63,54"
     alt="Page1" href="page1.htm">
    <area shape="poly" coords="73,50,159,50,159,24,73,9"
     alt="Page2" href="page2.htm">
    <area shape="circle" coords="197,32,28"
     alt="Page3" href="page3.htm">
    <area shape="default"
     alt="Other" href="default.htm">
    </map>

Copyright (C) 2003 杜甫々
初版： 2003年10月12日
http://www.tohoho-web.com/how2/color.htm