■　ＨＴＭＬにおけるクリカブルマップの利用
 

次のような図において，与えられた数値（例えば　-2.3　）をマウスでクリックさせる問題においては，ＨＴＭＬのクリカブルマップを利用することができます．クリカブルマップにはサーバのＣＧＩを利用するものと，クライアント側のブラウザの機能として行うものとがありますが，ここではクライアントサイドのクリカブルマップを利用するものを解説します．

上図の数直線を表わす画像を"x_axis11.gif"とします． <IMG SRC="x_axis11.gif" BORDER=0 usemap="#q01" HEIGHT=37 WIDTH=682> <MAP name="q01"><AREA shape="rect" coords="233,0,237,20" href="javascript:saiten(1);"> <AREA shape="rect" coords="0,0,680,36"  href="javascript:saiten(2);"> </MAP> 　採点関数を用意します． function saiten(anum) {if(anum == 1)  document.kekka1.src = kr[1].src; else  document.kekka1.src = kr[2].src; } 　○×の図を用意します． kr = new Array(); kr[0] = new Image(); kr[0].src = "white.gif"; kr[1] = new Image(); kr[1].src = "yes.gif"; kr[2] = new Image(); kr[2].src = "no.gif";

<img src=...　にusemap="#名前">とします．border=0としないと枠線が出ます． 次に<map name="その名前">座標指定</map>を書きます． 座標指定は，領域の形として，長方形を指定するとき，<area shape="rect" coords="x1,y1,x2,y2" href="javascript:選択したときの関数">の形で書きます．ここに，領域の左上の点の座標が(x1,y1)，右下の座標が(x2,y2)です． 上の図では，点 -2.3　付近は（誤差の許容範囲も考えて）(233,0)-(237,20)で画像全体は(0,0)-(680,36)です．−−解答でない全体の画像もarea shapeで指定するのは，解答以外の点でもクリック可能にするためです． 左記のプログラムでは，領域(233,0)-(237,20)内の点は，領域が重複しているので１も２も返すように見えますが，実行時には先に該当する方が有効になるようです． 重要：クリカブルマップにおける座標は，その画像の左上の隅を(0,0)とみなす相対的な表示になります． 　私は，いずれは生徒に教える場合の便宜を考えて，すべてのツールをフリーソフトまたは無料ソフトで行っているため，画像はWindows付属のペイントで描きます．ペイントでは，bmp形式の段階で，現在座標が表示されるので，これをメモしておき，coords=""を埋めます．(ホームページ作成ソフトを使う場合は，この手順は自動化されているとのことです．) 　なお，bmp形式の段階で座標を記録して使う場合は，gifないしjpgに変換した画像をHTMLファイルに貼り付けるときに，原寸のまま使用することが大切です．

＜実際の見え方＞ 次の図で　-2.3　を示しなさい．

　area shapeとしては長方形の他に，円，多角形などがあります．
　円の場合：<area shape="circle" coords="x,y,r" href="...">の形となります．なお，私の家庭用マシンではＩＥでcircleを指定するとシステムがダウンしてしまうためcircleは使用していません(原因不明)．学校用マシンではエラーは生じません．
　多角形の場合は，<area shape="polygon" coords="x₁,y₁,x₂,y₂,x₃,y₃,..." href="..">です．この場合，点列(x₁,y₁)-(x₂,y₂)-(x₃,y₃)-...が閉じていないときは，最後の点から，最初の点を結んだ図形となります．

　次の例は，ぶどうを選ばせるものです．（実際にはいらない線ですが，解答として想定した多角形を参考として薄く描いています．）
 

<script language="javascipt"> kr2 = new Array(); kr2[0] = new Image(); kr2[0].src = "white.gif"; kr2[1] = new Image(); kr2[1].src = "yes.gif"; kr2[2] = new Image(); kr2[2].src = "no.gif";  function saiten2(anum)  {if(anum == 1)   document.kekka2.src = kr2[1].src;  else   document.kekka2.src = kr2[2].src;  } </script> <center><img SRC="fruits.gif" height=217 width=212 BORDER=0 usemap="#q02"><map name="q02"><area shape="polygon" coords="124,1,93,18,83,41,80,70,103,103,151,88,161,79,154,50" href="javascript:saiten2(1);"><area shape="rect" coords="0,0,211,216" href="javascript:saiten2(2);"></map><img SRC="white.gif" NAME="kekka2" height=49 width=62></center>

＜問題＞　ぶどうはどれですか．

• Internet Explorerでは，クリック時に枠線が表示されます．
• この方法では，クリックしてからマウスカーソルを別の領域に移動するまで，マウス形状が砂時計などになります．（動かせば直ります．）
• マウスを領域上に移動させるとリンク先（ここでは採点関数）の引数がステイタスバー（画面下のメッセージ表示欄）に表示されます．これを防ぐために，逆にステイタスバーに「無駄なメッセージ」を表示してしまうことが考えられます．(onMouseOver="window.status='なるべく正確に！';return true;"など)