clickable map の書き方

尚，このドキュメントは NCSA httpd imagemap Script を参考にしています．

まず，当然のことながら gif または bitmap 形式の clickable map に使用する画像を用意します．続いて clickable map を挿入する HTML 部分に次のように ISMAP 機能を用います．ただし，ここでは clickable の対象とする画像データを ~sho/graphics/gif/shoun.gif，map configure を自分のディレクトリの ~sho/imagemap/sample.map とします．

<A HREF="/cgi-bin/imagemap/~sho/imagemap/sample.map"> <IMG SRC="http://www.momo.it.okayama-u.ac.jp/~sho/graphics/gif/shoun.gif" ISMAP></A>

ISMAP というお呪(まじな)いとアンカーで囲むことで shoun.gif を clickable map にする準備が出来ました．

古いバージョンの imagemap では，この map configure file の所在を imagemap.conf というファイル内で設定しなけれなりませんでしたが，新しい imagemap では準備で見た通り直接その configure file を指定するので，imagemap.conf を書き変える煩わしさが無くなりました．

さて，その map configure file では，画像データ上の領域と URL との対応関係を明記します．その記法は次の通りです．

# で始まる行はコメントで，他の空行以外の行は，以下のようなフォーマットになります:

method url coord1 coord2 ... coordn

coordi は coordinate と呼ばれるもので，x,y という形をしています．coordinate の並ぶ数(つまり上記したn)は，method の指定によって異なります．

method は次のうち一つ指定できます．

• default

  default URL を指定します．default URL とは，click した座標が，他のmethodで指定したリージョンに含まれない場合のリンク先を言います．

• circle

  coordinate は center edgepoint という形です．center で指定された座標を中心とし edgepoint で指定したそれから導出される円の領域をしていします．

• poly

  多角形の領域を指定します．cordinate は各頂点の座標を指定します．ただし，最高100個までしか指定できません．

• rect

  長方形の領域を指定します．coordinate は upper-left lower-right で長方形の左上の頂点の座標・右下の頂点の座標を指定します．

• point

  coordinate は点の座標を指定します．これは，複数の point を指定した場合，click した座標から最も距離の近い点をリンク先とするものです．

url は URL のことです．:-)

注意:

• map configure の中での領域指定で往々にしてその領域間で重複するところが出ると思います．imagemap は map configure file を順に上から見ていき，その click された座標を含む method をリンクの対象にします．つまり，評価順位が map configure 内で指定されます．特に，順位を高くしなければならない場合(例えば，円の領域を含む四角形を書くなど．ここでは，必ず円の method を先に map configure で指定しなければならない．)は注意して下さい．
• default method と point method とは共用しません．直感的に，分かると思いますが，故事の「矛盾」と同じ関係です．:-)

サンプルの map configure は sample.map ここを click すると見れます．

さて，実はもうこれで clickable map を書くのに必要なことは全て揃いました．ここでは，上で書いた「高橋紹雲(紹運)」(あぁ，趣味まるだしぃぃ...^^;)の clickable map のデモを試してみてください．

どうですか? map configure の指定通りリンクされているのが分かりましたか?