DHTML -2-

　「 OnMouseOver 」「 OnMouseOut 」は、ハイパーリンクに乗ったときに発動する命令として取り扱いましたが、画面上の任意の位置にあるレイヤーに反応するスクリプトを組もうとする場合、ウインドウ全体で動作するスクリプトを作成する必要があります。
　マウスの移動、マウスのクリックの２つのイベントをウインドウ全体でキャプチャーすることの出来る命令は、こういった、動的なサイトの構築を行うために用意されていると思います。

マウスをウインドウ上で判定させる

<Html>
<Head>
  <Script Language = "Javascript">

  isNS4 = (document.layers) ? 1 : 0;


  if (isNS4){
    document.captureEvents(Event.MOUSEMOVE|
                  Event.MOUSEDOWN|Event.MOUSEUP);
  }

  document.onmousemove = mousemove;
  document.onmousedown = mousedown;
  document.onmouseup = mouseup;

  function mousemove(myEvents){};
  function mousedown(){};
  function mouseup(){};


  </Script>
</Head>
<Body>
</Body>
</Html>

　さて、このスクリプトは、動作させても何も意味をなしませんので動作例はありませんが、マウスを動かすと、それぞれのファンクションを発動させるための命令系統に関してはちゃんと兼ね備えています。順に説明しましょう。

　マウスのイベントを画面上で発動させるためには、「 document.[メソッド] = [ファンクション] 」の形式を、Javascriptソース内の任意の位置に配置します。
　この記述方法はＩＥ５、ＮＳ６、ＮＳ４において共通ですが、ＮＳ４に関しては、どのイベントをキャプチャーするかといった規定をあらかじめ設定しなくてはならないので、「 document.captureEvents 」で、あらかじめ「 MOUSEMOVE 」「 MOUSEDOWN 」「 MOUSEUP 」を宣言する必要があります。

　宣言された命令は、それぞれ指定された動作を行った際に、指定されたファンクションへ信号の受け渡しをします。　マウスクリックに関しては「DOWN」も「UP」も、受け渡し関数を指定する必要はありませんが、「 mousemove(myEvents) 」では、マウスの縦横の位置を取得しなくてはならないため、ファンクションの引数に（myEvents）を割り当てています。　（　この引数宣言は、ＩＥ５では任意ですが、ＮＳ６とＮＳ４では必須となります　）

　では、実際に動作するスクリプトを簡単に記述して見ましょう。

マウスのクリックに反応させる

<Html>
<Head>
  <Script Language = "Javascript">

  isNS4 = (document.layers) ? 1 : 0;

  var img = new Array();
  img[01] = new Image(); img[01].src="cg/06_03_on.gif";
  img[02] = new Image(); img[02].src="cg/06_03_off.gif";

  if (isNS4){
    document.captureEvents(Event.MOUSEDOWN|
                                 Event.MOUSEUP);
  }

  document.onmousedown = mousedown;
  document.onmouseup = mouseup;

  function mousedown(){
    document.images["pwr"].src = img[1].src;
  };

  function mouseup(){
    document.images["pwr"].src = img[2].src;
  };


  </Script>
</Head>
<Body>
  <Img Src="cg/06_03_off.gif" name="pwr" width=200 height=40 >
</Body>
</Html>

■動作例

　前ページの「マウスをハイパーリンクに乗せると画像が変わる」スクリプトの応用版です。　この場合、ブラウザの任意の位置でクリックをすると、画像が変わるというスクリプトが組まれています。
　同様にクリックを止めた場合は元に戻るよう組んであるので、マウスがクリックされている間画像を変化させることが可能になります。
　尚、ここでは省略した「MouseMove」を用いれば、画面の任意の位置でクリックした場合のみ反応するスクリプトなどを組むことも可能になりますが、スクリプトが若干長くなるので、次のページで詳細を説明することにします。

ページの最上段へ移動します