第69回 「画像をマウスに追従させる」
今回は画像をマウスに追従させるプログラムについて説明します。
今までマウスイベントはonMouseover, onMouseoutしか扱いませんでしたが、マウスに追従させるには、この２つのイベントでは用に足りません。マウスが動いた時に発生するイベントが必要になります。そのイベントは
onMousemove
というものでマウスが動くたびにイベントが発生します。このイベントを<body>タグ内に書いておきます。
<body onMousemove="moveImage()">
のようにするとマウスが動くたびにmoveImage関数が呼び出されます。
呼び出された関数側ではマウスの座標を取得する必要がありますが、マウス座標はブラウザによって取得方法が異なっています。*1
Internet Explorerの場合はeventオブジェクトのx,yプロパティに入っているので関数内で
objX = event.x
objY = event.y
のようにして変数に座標を読み込みます。読み込まれた座標値をleft,topプロパティに代入すれば画像がマウスに追従するようになります。
以下のプログラムがマウスに画像が追従するものです。
<html>
<head>
<title></title>
<style type="text/css"><!--
#myIMG {
position:absolute;
left: 0px;
top: 0px;
}
--></style>
<script language="JavaScript"><!--
function moveImage()
{
x = event.x;
y = event.y;
document.getElementById("myIMG").style.left = x;
document.getElementById("myIMG").style.top = y;
}
// --></script>
</head>
<body onMousemove="moveImage()">
<img src="photo1.jpg" id="myIMG">
</body>
</html>
次回はブラウザを判別する方法について説明します。
*1 Netscape 4では取得前の設定も必要です。Netscape 4,6ではイベントによって呼び出された関数に自動的に第一引数にイベントオブジェクトが渡されます。このため、ブラウザを判別して処理する必要が出てきます。