Mouse Move

マウスの座標を表示

【Source Code】

<script type="text/javascript">
  document.onmousemove =
    function(e)
    { // InternetExplorer 用
      if (!e)  e= window.event;
      target = document.getElementById('sampleform');
      target.xpos.value= e.clientX;
      target.ypos.value= e.clientY;
    }
</script>
</head>

<body>
<h1>Mouse Move</h1>
<h3>マウスの座標を表示</h3>

<form action="" method="" id="sampleform">
<ul>
<li>X-POS: <input type="text" value="" name="xpos" /></li>
<li>Y-POS: <input type="text" value="" name="ypos" /></li>
</ul>
</form>

X-POS と Y-POS にマウスの座標を表示する Form です。
name に "xpos", "ypos" を設定して下さい。

<form action="" method="" id="sampleform">
<ul>
<li>X-POS: <input type="text" value="" name="xpos" /></li>
<li>Y-POS: <input type="text" value="" name="ypos" /></li>
</ul>
</form>

onmousemove でマウスの移動を検出して Form に表示します。
target.xpos.value, target.ypos.value で Form の領域を参照して表示します。
Internet Explorer を使って Windows8.1 の環境で作成しています。
環境が変わると支障があるかも知れません。

  document.onmousemove =
    function(e)
    { // InternetExplorer 用
      if (!e)  e= window.event;
      target = document.getElementById('sampleform');
      target.xpos.value= e.clientX;
      target.ypos.value= e.clientY;
    }
</script>

前田稔の超初心者のプログラム入門
 超初心者のプログラム入門(JavaScript)