Image follow Mouse
example
◆ マウスに追従する画像スクリプトです ◆(クリックすると停止し、再度クリックすると動き出します)
source code
・HEAD部の記述
   1  <SCRIPT LANGUAGE="JavaScript">
   2  <!--
   3    function init() {
   4      document.captureEvents(Event.MOUSEMOVE);
   5      document.onmousemove = follow;
   6      document.onmousedown = release;
   7    }
   8    function follow(event) {
   9      x = event.pageX;
  10      y = event.pageY;
  11      document.layers["id"].moveTo(x,y);
  12      flag = true;
  13    }
  14    function release() {
  15      if (flag) {
  16        document.releaseEvents(Event.MOUSEMOVE);
  17        flag = false;
  18      }
  19      else{ init(); } 
  20    }
  21  // -->
  22  </SCRIPT>

・BODY部の記述
  23  <LAYER ID="id" LEFT="X" TOP="Y" onLoad="init()">
  24    <A HREF="javascipt:void(0)" onClick="release()">
  25      <IMG SRC="url" WIDTH="Wpixel" HEIGHT="Hpixel">
  26    </A>
  27  </LAYER>
source point
マウスの動作にあわせて、画像が追従するDynamicHTMLだ。

まずは HEAD 部の説明から
3 〜 7 行はこのページのマウスイベントを初期化する関数 init の設定だ。
4 行目ではページ全体に対して MOUSEMOVE イベントをキャプチャーするように設定している。
5 行目はマウスが動いているときの処理先(関数 follow)の指定で、6 行目はマウスをクリックした際の 処理先(関数 release)を指定している。
8 〜 13 行は画像をマウスに追従させる関数 follow の設定だ。
引数 event にはイベントが発生したマウスの位置情報が入るので、 9 , 10 行目の x , y には ブラウザ画面上のマウスの X 位置 と Y 位置が入る。
11 行目では、先に得られたマウスの位置に応じて id レイヤーを移動させる moveTo メソッドを 実行させている。マウスポインタに対してレイヤーの位置を相対的に変えたい場合は、この x と y に 数値を加減算してやればよい。例えば、右方向に 30 , 上方向に 10 ピクセルずらしたい場合は、 [ document.layers["id"].moveTo(x+30,y-10) ] という指示になる。
12 行目では、マウスイベントの状態を維持させるために、変数 flag の値に true をセットしている。 この flag の値によって、次に説明する関数 release で処理が分岐される。
14 〜 20 行はクリックしたときに、マウスに追従していた画像を停止させる関数 release の設定だ。
15 行目の [ if (flag) ] とは flag の値が「真」のときという意味だ。このようなものを条件分岐と言い、 プログラミングにおいて「真」とは true や 1 のことをあらわすので覚えておこう。それで真のときに この if ループが実行される。if ループの中身は、16 行目で MOUSEMOVE イベントを解除し、17 行目で 変数 flag の値を false に設定している。 19 行目の else ループは、画像が停止しているときに再度マウスをクリックした際に実行されるループで、 flag の値が「偽」のとき実行される。「偽」とは false や 0 のことをあらわす。この else ループでは再び 画像をマウスに追従させるため関数 init を呼び出している。なぜこの else ループが実行されるのかを説明 しておくと、一度目のクリック(関数 release の呼び出し)時に flag の値を false に設定したので、次の クリック時は [ if (flag) ] の条件が成り立たなくなる、そのため else ループが実行されるのだ。

次に BODY 部 の説明をする。
23 〜 27 行は ID 名 id の 1 つのレイヤーだ。
23 行目のレイヤーの幅( X )と高さ( Y )は、25 行目の画像の幅( Wpixel )と高さ( Hpixel )と 同じ値を設定したほうがいいだろう。onLoad とはレイヤーの読み込み完了時に実行されるイベントで、 ここでは関数 init が呼び出されている。なお、ここで言う「読み込み完了」とはあくまでも器としての レイヤーのことで、その中に含むオブジェクト(今回は画像)の読み込み状態までは関知しない。
24 〜 26 行は画像に設定したリンクだ。リンクなので [ A HREF= ] を使うのだが、今回はクリック時に リンク動作をされると困るので JavaScript で無視( void(0) )させている。その代わり onClick イベントで クリック時の処理先を関数 release に指定している。

以上で「マウスを追従する画像スクリプト」の説明は完了だ。