JAVA Scriptを使うと、マウスカーソルの位置をリアルタイムで取得することができます。ここでは、マウスカーソルを追いかけるように画像をブラウザ上に表示する方法を考えてみましょう。
マウスカーソルの動きに合わせて表示する画像を、非表示の属性にして画面上に配置します。
<IMG SRC="../../assets/images/dog01.gif" STYLE="position:absolute;visibility:hidden;top:0;left:0" ID=img1>
<IMG SRC="../../assets/images/dog02.gif" width="40" height="38" ID=img2 STYLE="position:absolute;visibility:hidden;top:0;left:0">スタイルシートで「visibility」プロパティに「hidden」を設定すると、配置したオブジェクトを非表示にできます。
カーソルの座標を取得し、カーソルの座標に合わせて画像を表示する関数を記述します。
<SCRIPT LANGUAGE="JavaScript">
<!--
var x,y,oldx,oldy;
document.onmousemove = heli_move
function heli_move(){
oldx=x;
oldy=y;
x=event.clientX;
y=event.clientY;
if(oldx<=x){
img1.style.visibility="hidden";
img2.style.visibility="visible";
img2.style.left=x-60;
img2.style.top=y+10;
}
else{
img1.style.visibility="visible";
img2.style.visibility="hidden";
img1.style.left=x+20;
img1.style.top=y+10;
}
}
//-->
</SCRIPT>例では、カーソルの移動方向に合わせて左向きと右向きの画像を切り替えて表示しています。このスクリプトでは、予め配置されている左向きの画像と右向きの画像を「visibility（可視属性）」プロパティを使って切り替えるのがポイントです。例えば、左向きの画像を表示する場合には、左向きの画像（例では、「dog01.gif」）の「visibility」プロパティを「visible（表示）」に、右向きの画像プロパティを「hidden（非表示）」に設定します。
