Webpage上の絵をクリックすると別のページに移動する機構は
<A HREF="..."><IMG SRC="..."></A>により簡単にできますが、
さらに絵のクリックした場所に応じて移動先が変わる機構もあります。
それが image map またの名を clickable map です。
秋葉原のマップのように、全体図があってセクションの部分をクリック
するとそのセクションの解説のページが出るようなことに使われます。
Image mapの作成法には幾つかありますが、この章では
そのうち旧来からの Server Side Image Map について
解説します。次の章で新出のClient Side Image Map を紹介します。
クリックした座標をCGIに転送して、CGIが進むべきページを決定する 仕組みです。旧来からある方法なので画像を扱えるbrowserならば、どの ブラウザでも利用できます。新出のImageMapがデータ処理をbrowser内で 行うのに対して、こちらはWWW Server内で行うので Server Side Image Map と呼んで区別します。
例えば imagemap.cgi をその処理CGIとします。クリックされる絵 を例えばimagemap.gifとしましょう。この絵を次のようにして貼ります。
<A HREF="imagemap.cgi"><IMG SRC="imagemap.gif" ISMAP ></A>「ISMAP」がImageMapであることを示す呪文です。
この絵をクリックすると、その座標がCGIへコマンドライン引数として 渡されます。具体的には "imagemap.cgi?100,200" のように座標情報が ひとつの文字列の引数として加えられ呼び出されます。 つまり imagemap.cgi の argv[1] が "100,200" になるのです。 ただし管理者のHTTPdの設定によってはこれが argv[2] に なっていることもありますので確認してください。
このCGIにさらにコマンドライン引数を付けて呼ぶには注意が必要です。 HREFの部分を次のようにすると、
HREF="imagemap.cgi?argv1"これでは "imagemap.cgi?argv1?100,200" と呼び出されてしまい、 argv[1] は "argv1?100,200" になってしまいます。また次の例では
HREF="imagemap.cgi?argv1+"とすると argv[1] は "argv1" となり、argv[2] は "?100,200" となりまだ少し注意が必要です。
このような面倒をさけるために、別なタイプのコマンドライン引数が 使えます。
HREF="imagemap.cgi/argv1"とすると環境変数 PATH_INFO に "/argv1" がセットされ argv[1]は "100,200" のままです。これにより imagemap.cgi に座標以外の 情報を送ることができます。
imagemap.ccの中身を説明する前に、ひとつ重要な機能を説明します。 browserは出力テキストの先頭に
Location: http://www-cms.phys.s.u-tokyo.ac.jp/~naoki/ETC/intro.htmlのような指定があると、それ以後の文章を表示せずに、ここで指定された ファイルを表示します。これを imagemap.cgiに出力させるのです。
些細かつ重要な注意ですが、この行は必ず出力の先頭にしてください。 そしてこの行の次の行は空行にしてください。URLは絶対URLです。 相対URLは使えません。
ImageMapを処理するCGIとして指定されたCGI
(本書の例では imagemap.cgi")が受け取る座標データは例えば
"100,200"のような文字列なので、まずこれを2つの整数値に変換する
処理が必要です。sscanf()関数を使うのが便利でしょう。
int main( int argc, char* argv[] )
{
int X,Y;
sscanf( argv[1], "%d,%d", &X, &Y );
次に得た座標がどこの領域に属しているのかを検査します。 といってもただのif文です。説明する必要は無いでしょう。
そして最後に指定されたページに移るようにLocationを表示させます。 これもprintfだけです。これでImageMapの処理CGIは完成です。
ImageMap処理CGIの一例として私が作成した imagemap.cc の sourceを公開します。