|
クリッカブルマップにはサーバーサイドでCGIを利用するものとクライアントサイドのものがあります。 レスポンスはクライアントサイドの方が遥かに良いのですが、ここではサーバーサイドのクリッカブルイメージを説明します。
- イメージを作る
- マップファイルを作る
- マップをリンクさせる
1.イメージを作る
イメージファイルは普通のイメージファイルと変わりはありません。 現在お使いの画像ツールなどで作成してください。
イメージのサンプル
2.マップファイルを作る
イメージマップは次のようなフォーマットで作成する必要があります。
タイプ URL 位置1 位置2 ... 位置n タイプは次の3つで、ポイント部のタイプを示します。位置は x,yで記述します。
 | circle URL x1,y1 x2,y2
[円]位置は円の中心と円周の位置の2個所を指定します |
| rect URL x1,y1 x2,y2
[四角形]左上と右下の2個所を指定します |
| poly URL x1,y1 x2,y2 x3,y3 ... xn,yn
[多角形]多角形の点位置を指定します。100角形までです |
| point URL x,y
[点]特定の点を指定します |
| default URL
[その他の位置]指定された以外 |
"#"を書くことによってそれ以降の文をコメントにする事ができます。
例）# コメント
サンプルのイメージとマップファイルです。
領域を指定されたイメージのサンプル
サンプルマップファイル
# Imagemap file for sampleimg.gif
default /cgi/library/imagemap/sample_default.html
# Home page for sample image
rect /cgi/library/imagemap/sample_home.html
22,18 84,92
# News page for sample image
rect /cgi/library/imagemap/sample_news.html
84,18 136,92
# Comments page for sample image
rect /cgi/library/imagemap/sample_mail.html
136,18 184,92
# Calendar page for sample image
rect /cgi/library/imagemap/sample_calendar.html
184,18 251,92
# Bulletin board page for sample image
rect /cgi/library/imagemap/sample_bulletin.html
251,18 307,92
# Web stats page for sample image
rect /cgi/library/imagemap/sample_stats.html
307,18 359,92
マップファイルを手で書くのは大変です。 そのためマップファイルを簡単に生成するためのツールがいくつかあります。Mapeditは
Thomas Boutell 氏が作成したツールで、 Windowsなどで利用できます。 MacではWebMapを利用する事で生成できます。
KK-NETバーチャルサーバーではNCSA httpdを使用していますので、マップファイルもNCSA形式に適合するようにする必要があります。
3.マップをリンクさせる
最後にイメージとマップをリンクさせます。
- HTMLファイルにISMAPタグを書くことによってクリッカブルマップは機能するようになります。
具体的には下の様にします。
<a href = "/cgi-bin/imagemap/sample">
<img border = 0 src = "sampleimg.gif" ISMAP></a>
このタグの中の"sample"は先程作ったマップファイルから拡張子".map"を取り除いた名前です。このファイルは指定した
/cgi-bin/imagemap デレクトリに置きます。
- マップファイルのロケーションをコンフィグレーションファイルで指定します
"imagemap.conf"が"usr/local/etc/httpd/conf"にあります。
このファイルに次のような形式でマップファイルを登録します。
名前: ファイルへのフルパス
先程のsample.mapを例にすると次のようになります。
sample: /usr/local/etc/httpd/htdocs/cgi-bin/imagemap/sample.map
さらに詳しい情報やこのドキュメントに誤りがあると考えるなら、次のドキュメントを参照してください。
http://hoohoo.ncsa.uiuc.edu/docs/setup/admin/Imagemap.html
|
