マウスの動きにあわせて移動する

公開講座

マウスの動きに合わせて段落を移動させるスクリプトです。

次のリストが移動する段落のスタイル定義です。絶対指定で位置を指定しています。最初は段落が見えないような位置（top : -100px;)にしています。

<STYLE>
<!--
P.P1 {
  font-size : 20pt;
  color : yellow;
  background-color : blue;
  padding : 4pt;
  position : absolute;
  top : -100px;
  left : 0px;
  width : auto;

}
-->
</STYLE>

次のリストがマウスの動きにあわせて段落を移動するスクリプトです。マウスが移動するとeventオブジェクトのプロパティxとyがマウスポインターの位置を保持します。このプロパティの値をDOMを使って動かしたい段落のスタイルtopとleftに代入します。

<SCRIPT language="JavaScript">
window.document.onmousemove = mvD;
function mvD() {
  DDD = document.getElementById('pp');
  DDD.style.left = event.x + 10;
  DDD.style.top = event.y + 10;
}
</SCRIPT>

以下がマウスで動かす段落の定義です。DOMを使ってJavaScriptからアクセスできるようにid属性を指定します。

<P class="P1" id="pp">公開講座</P>