クリッカブルマップは「クリック可能なマップ」の意味です。画像ファイルの、この部分をクリックしたらこのページに、この部分をクリックしたらこのページにと、クリックする箇所によってジャンプ先のページを指定することができます。クリッカブルマップには下記の方法があります。
クリッカブルマップと呼ぶのもおこがましいような方法ですが、単にリンク付きの画像を縦横に並べます。途中で改行されてしまうのを防ぐために white-space に nowrap を指定しています。また、画像と画像の間に隙間があかないように、タグとタグの間(> と < の間)に改行やスペースを用いないようにしています。
<div style="white-space:nowrap"><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></div>
サーバサイドクリッカブルマップは、どこをクリックしたらどのページにジャンプするという情報をサーバ側に保持する方法です。現在ではあまり使用することは少なくなってきましたが、地図上の移動など領域ではなく、座標に従った処理をする場合に利用されています。
<a href="smap.cgi"><img src="smap.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="#map1" border=0 width=243 height=68> <map name="map1"> <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>