■ マウスの座標取得

マウスのイベントとしてマウスを移動した時のイベントを取得し、特定の処理を実行させます。

イベント発生時に現在のマウスポインタの座標を取得し、それを指定したフォームで表示すると同時にレイアウト枠（レイヤー）の移動、その中の文字変更も同時に行います。

◆ 実行サンプル

【記述サンプル】

まず、テキストエディタなどを使用し、次の記述を「mpget1.js」というファイル名で保存します。
Wx = -1; Wy = -1; spannam1="span1"; if (document.layers) document.captureEvents(Event.MOUSEMOVE); document.onmousemove = m_pos; function m_pos(event0) { if (navigator.appName.charAt(0)=="M") { Et =event.type; Sx =event.screenX; Sy =event.screenY; Wx = document.body.scrollLeft+event.clientX; Wy = document.body.scrollTop+event.clientY; } if (navigator.appName.charAt(0)=="N") { Et =event0.type; Sx =event0.screenX; Sy =event0.screenY; Wx =event0.pageX; Wy =event0.pageY; } txt0=""; txt0+="マウスの座標"; txt0+=" : X = "+Wx; txt0+=" : Y = "+Wy; if (navigator.appName.charAt(0)=="M") { document.all[spannam1].style.visibility = 'visible'; document.all[spannam1].innerText = txt0; document.all[spannam1].style.left = Wx+8; document.all[spannam1].style.top = Wy+16; } if (navigator.appName.charAt(0)=="N") { document.layers[spannam1].document.open("text/html"); document.layers[spannam1].document.write(txt0.bold()); document.layers[spannam1].document.close(); document.layers[spannam1].document.fgColor = "red"; document.layers[spannam1].document.bgColor = "yellow"; } document.form1.xbox.value = Wx; document.form1.ybox.value = Wy; }

次に、HEAD句内にJavascriptの呼び出しを次のように記述します。
<script type="text/javascript" src="mpget1.js"></script>

ダブルクリックしたときのイベント情報を取得するためのタグはこのサンプルの場合次のように記述しています。
<form name="form1">
マウスの座標:
x = <input type="text" size="4" name="xbox">
y = <input type="text" size="4" name="ybox">
</form>
<span style="color : red;background-color : yellow;font-weight : bold;position:absolute;left:240px;visibility: hidden;" id="span1">マウスの座標: x = y = </span>