| ポイント |
<![CDATA[
X = event.x + document.body.scrollLeft;
Y = event.y + document.body.scrollTop;
document.all["msxy"].innerText = X+","+Y;
document.all["msxy"].style.left= X + 8;
document.all["msxy"].style.top = Y + 16;
document.onmousemove = displayMouseXY;
<div id="msxy">
]]>
|
| 説 明 |
文字をマウスに追従させるにはマウスの座標を逐次検出し文字の表示位置を再設定します。マウスの座標を逐次監視するためにonmousemoveイベントハンドラに処理関数名を指定します。IEではdocument.onmousemoveに処理関数を設定します。イベント発生後に呼び出される関数側ではマウス座標を読み出しますがIEの場合はevent.x、event.yで取得できます。文字の表示位置は「document.all["オブジェクト名"].style.left」「document.all["オブジェクト名"].style.top」で設定することができます。
文書範囲が広くてスクロールするような場合はマウス座標に加えて現在のスクロール位置を加算する必要があります。横方向のスクロール位置は「document.body.scrollLeft」、縦方向のスクロール位置は「document.body.scrollTop」に格納されているので、これをマウス座標に加算します。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>マウスに文字を追従させる（スクロールしても大丈夫版）</title>
<style type="text/css"><!--
#msxy { position:absolute; }
--></style>
<script Language="JavaScript"><!--
function displayMouseXY(evt)
{
X = event.x + document.body.scrollLeft;
Y = event.y + document.body.scrollTop;
document.all["msxy"].innerText = X+","+Y;
document.all["msxy"].style.left= X + 8;
document.all["msxy"].style.top = Y + 16;
}
document.onmousemove = displayMouseXY;
// --></script>
</head>
<body bgcolor="white">
マウスポインタ座標表示<br>
<div id="msxy"></div>
<table border="1" width="800" height="800" bgcolor="#F8F8FF">
<tr><th>Sample</th></tr>
</table>
</body>
</html>
]]>
|
| 補足説明 |
なし |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
マウスに文字を追従させる（スクロールしても大丈夫版）