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