ホームページ作成情報
クリッカブルマップの作り方
技術部 support@cyborg.ne.jp
support@cyborg.ne.jp
はじめに。
絵の中でマウスがクリックされたとき座標を返して、それに対応するアクションをしてくれるようなものをクリッカブルマップといいます。有名なものにネットスケープ社のホームページやＩＩＪのホームページなんかがクリカッブルマップを使っています。
私自身は、この機能が有効に働く場面などそうあるもんでもないだろうと思います。また、こんなの使えるからどうだってんだ！などとも思ったりするんですが、一応ＣＧＩの教科書には必ず出てくる機能だったりするので、出来ないと具合が悪いなぁということでここではクリッカブルマップの作り方を紹介します。
１クリッカブルマップのデモ
２.マップファイル
クリッカブルマップを実現するためにはどこを押されたら（座標）どうするか（アクション）を定義する必要があります。これをマップファイルと称してます。
- 注意:
- 教科書によってはドキュメントルートにこのマップファイルがなければならないような書き方をしてますが、そうでもないようです。自分のホームディレクトリに置けるようです。
たとえば、このような絵があったとして
青、赤、そしてそれ以外の領域はこんな感じで定義できます。
default white.htm
rect red.htm 50, 30 160,130
circle blue.htm 300,100 370,100
上から説明すると、default というのは未定義の部分でクリックされたらという意味です。その時は white.htm というとこに飛ぶという意味になります。
次に rect というのは矩形つまり四角形を意味しまして、絵の座標範囲が (50,30)-(160,130) の間でクリックされた場合は red.htm に飛ぶという意味です。
最後に circle というのはもちろん円のことですが、中心点 (300,100) で、円の外側の座標が (370,100) であらわされる円の中でクリックされた場合は blue.htm に飛ぶという意味です。
円の定義は中心点と円上のどの点でもいいみたいです。ですから、circle skyblue.htm 300,100 300,30 と表しても同じ円をのことになります。
それでは試しに、上の絵のどこかをクリックしてみてください。色によって処理を振り分けるデモになっています（実はあんまり厳密に座標にこだわって作ってるわけではないので、境界線の端は自信がありません。）
さて、先程は四角形と円の単純な図について定義してみましたが、poly という定義文でもっと複雑な図も定義できます。
ここにはニンジンの絵が書いてあります。この図は葉の部分、実の部分、そして地の部分と３つに分けて定義しています。結構複雑な絵なんですが、ちゃんと振り分け処理をしてるつもりです。ためしにクリックしてみてください
この定義文は以下のようになっています。
default /~support/www/clipmap/ninjin_w.htm
poly /~support/www/clipmap/ninjin_g.htm 33,25 26,31 26,86 32,105 36,113 44,119 50,130 56,136 75,136 86,125 90,114 95,106 109,104 129,80 91,84 87,100 82,108 80,112 67,113 69,109 75,95 72,87 69,87 72,83 83,76 96,74 108,67 110,63 109,58 122,43 125,43 129,25 103,30 96,50 90,55 68,71 64,78 63,88 60,96 58,89 69,42 75,35 77,26 76,4 61,7 58,20 47,109 45,111 44,47 42,39 32,25
poly /~support/www/clipmap/ninjin_r.htm 46,126 26,132 23,141 22,165 23,242 18,261 9,271 5,321 6,354 7,358 9,355 25,353 51,335 54,322 64,321 76,314 91,289 95,269 99,246 100,221 110,209 110,203 121,186 130,141 128,133 113,122 104,119 96,119 93,120 90,124 87,126 74,138 54,137 46,124 41,129
この辺を手作業でやると日が暮れてしまうので、ＭＡＰＥＤＩＴというソフトがありますので、それを入手（インターネットマガジン等の雑誌のＣＤに入ってます）するのがいいと思います。
なお、このへんは
等でも解説されています。参考にしてください。
３マップファイルの転送
作ったマップファイルは自分のホームディレクトリの下に格納します。
ＨＴＭＬの書き方にもよるのですが、~ID/public_html/www/clipmap というディレクトリに格納するものとして話しを進めましょう。
ついでに、ＧＩＦファイルも同じディレクトリに転送しておいた方がいいでしょう。転送する時のコツとして、マップファイルはテキスト型のファイルですから、テキストとして転送し、ＧＩＦファイルはバイナリファイルですからバイナリとして転送すると間違いがないようです。
４ＨＴＭＬファイルの作成
ではＨＴＭＬではクリッカブルマップはどのように表現すればいいかというと、結構簡単です。
最初の例ですと、
<!---例１のクリッカブルマップの定義--->
<a href=/cgi-bin/imagemap/~support/www/clipmap/clip_i.map>
<img src="clip_i.gif" ismap>
てな具合です。ここで注意するのは IMAGEMAP というＣＧＩプログラムとマップファイルの格納場所をゴッチャにして指定しなければならないという点です。
<a href=/cgi-bin/imagemap/~support/www/clipmap/clip_i.map>
というのがその部分なのですが、 /cgi-bin/imagemap というのがＣＧＩプログラム名です。その後ろに続く ~support/www/clipmap/clip_i.map というのがマップファイル名です。ＨＴＴＰの仕様なのでこればっかりは文句を言ってもはじまりません。こういうものだと納得するしかないのですが最初は理解しにくいですね。慣れればどうってことないです。
さき程マップファイルは ~ID/public_html/www/clipmap というディレクトリに格納するという説明をしたのですが、public_html というのはＨＴＴＰＤはデフォルト値として判断するのでこれは抜いて書きます。上の例ですとこのディレクトリの下にclip_i.mapというマップファイルがあり、それに従いアクションを起こすということを意味してます。
次に、絵を定義します。定義文の最後には ISMAP という記述を必ず入れます。タグの最後に入れるようです。
あとはＨＴＭＬのソースを ~ID/public_html/www/clipmap/ の下にファイル転送すれば完了です。
以上
このクリッカブルマップはローカルマシン上ではテストしにくいため、ＷＷＷサーバーに転送してはデバッグ、また転送してはデバッグというくり返しになりますんで、開発するのは結構大変かもしれません。頑張ってください。
掲載責任者 技術部 西田弘範
禁無断転載
転載する場合は事前に報告のこと
登録日 96/01/14
修正日 ../../..