| ポイント |
<![CDATA[
document.all["myImg"].style.left= event.x + 8;
document.all["myImg"].style.top = event.y + 16;
document.layers["myImg"].left = evt.x + 8;
document.layers["myImg"].top = evt.y + 16;
if (document.all) document.onmousemove = moveImage;
if (document.layers) {
window.onmousemove = moveImage;
window.captureEvents(Event.MOUSEMOVE);
}
]]>
|
| 説 明 |
画像をマウスに追従させるにはマウスの座標を逐次検出し文字の表示位置を再設定します。マウスの座標を逐次監視するためにonmousemoveイベントハンドラに処理関数名を指定します。IEではdocument.onmousemove、NNではwindow.onmousemoveに処理関数を設定します。NNの場合は設定しただけではイベントが拾えないためcaptureEvents()でマウス移動イベントを取得するように指定します。イベント発生後に呼び出される関数側ではマウス座標を読み出しますがIEの場合はevent.x、event.y、NNでは関数の引数名がevtとすればevt.x、evt.yとなります。文字の表示位置はIEでは「document.all["オブジェクト名"].style.left」「document.all["オブジェクト名"].style.top」、NNでは「document.layers["オブジェクト名"].left」「document.layers["オブジェクト名"].top」で設定することができます。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>マウスに合わせて画像を移動させる</title>
<script language="JavaScript"><!--
function moveImage(evt)
{
if (document.all)
{
document.all["myImg"].style.left= event.x + 8;
document.all["myImg"].style.top = event.y + 16;
}
if (document.layers)
{
document.layers["myImg"].left = evt.x + 8;
document.layers["myImg"].top = evt.y + 16;
}
}
if (document.all) document.onmousemove = moveImage;
if (document.layers) {
window.onmousemove = moveImage;
window.captureEvents(Event.MOUSEMOVE);
}
// --></script>
</head>
<body>
<div id="myImg" style="position:absolute;top:0px;left:0px;">
<img src="q.gif">
</div>
</body>
</html>
]]>
|
| 補足説明 |
IEではDIVタグでなくIMGタグのみでも動作させることができます。 |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
マウスに合わせて画像を移動させる