DHTML -2-

　マウスイベントは言うまでも無く、単体で使うわけではなく、様々なスクリプトと複合して使っていくことで初めて意味を成してきます。　直感的なマウス操作をＷｅｂサイト上で実現することによって、これまでとは違ったサイト構築をすることも可能になるわけです。
　ここでは若干複雑になりますが、こういったスクリプトの組み込み例を紹介していきましょう。

マウスのクリックでレイヤーの表示状態を制御する
　マウスのクリック動作例で示した例( こちら )は、マウスのクリックで画像を変化させるという物でしたが、ここではクリック動作でレイヤーの表示と非表示を切り替えるスクリプトを説明してみましょう。

マウスのクリックにレイヤーを反応させる

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


    isIE4 = (document.all) ? 1 : 0;
    isNS4 = (document.layers) ? 1 : 0;
    isNS6 = navigator.appVersion.charAt(0) == 5 
                  && navigator.appName.charAt(0) == "N";


    var Layer_Message = "<Table border=0 width=100 height=100 
        Bgcolor='#8899bb'><Tr><Td>画面上をクリック</Td></Tr></Table>";

//レイヤーの書き込み
    if ( isIE4 || isNS6 ){
      document.write("<Div id='MSG' style='position:absolute;display:
                                 block;top:60;left:50'>");
      document.write( Layer_Message );
      document.write("</Div>");
    } else if( isNS4 ) {
      document.write("<Layer name='MSG'
                    visibility='show'top='60'left='50'>");
      document.write( Layer_Message );
      document.write("</Layer>");
    }

//マウスイベントの取得
    if (isNS4){
      document.captureEvents(Event.MOUSEUP);
    }
    document.onmouseup = mouseup;

//マウスクリックによる動作
    var p_count = 1;
    function mouseup(){
      p_count ++ ;
      if (p_count >= 2 ) p_count = 0;
      layer_power(p_count);
    };

//表示 非表示制御
    function layer_power(cod){
      var IE_In = "block" , NS_In = "SHOW";
      if (cod == 0){ //POWER OFF
        IE_In = "none"; NS_In = "HIDE";
      }
      if (isIE4 || isNS6){
        el = document.getElementById("MSG");
        el.style.display = IE_In;
      } else if (isNS4) {
        document.layers["MSG"].visibility = NS_In;
      }
    }


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

■動作例

　内容としては、マウスクリックで画像が反応するスクリプト （こちら） の応用版になります。　上のスクリプトは、マウスのクリックによって、レイヤーのＯＮとＯＦＦを切り替えるファンクションを、画像変更スクリプトの変わりに追加してあります。


    var p_count = 1;
    function mouseup(){
      p_count ++ ;
      if (p_count >= 2 ) p_count = 0;
      layer_power(p_count);
    };

　マウスをクリックすると、「 mouseup() 」 ファンクションが発動します。（正確には、マウスのクリックをアップしたときに発動します） 「 var p_count = 1 」 は、マウスのクリック状況によって切り替えを行う為のターゲット変数ですが、「 function { ～ } 」のの記述前に書かれていることに留意してください。　これはグローバル変数という意味ですが、つまり、

グローバル変数	ページ内のJavascript全てに影響する変数
ローカル変数	宣言した「 function(){ ～ } 」でのみ動作する変数

　という事で、複数のファンクションをまたいでいる場合に用いる変数を作成する場合はグローバル変数とする必要があるわけです。

　この「 mouseup() 」ファンクションは、呼び出されるたびに「 p_count = 1 」と「 p_count = 0 」を交互に返すスクリプトが組み込まれています。（ true と false で組めばもう少しすっきりしたスクリプトになりますけどね）出力結果の p_count は、レイヤーに実際の表示を行う 「 layer_power() 」 へ受け渡しされ、ここで表示と非表示を変化させています。

マウスの動きに合わせてレイヤーを動かす
　さて、では「 OnMouseMove 」を用いたスクリプトを作成してみましょう。
　ここでは、マウスをドラッグしている間だけレイヤーを動かすスクリプトを紹介してみます。

マウスのＤｎＤでレイヤーを動かす

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


    isIE4 = (document.all) ? 1 : 0;
    isNS4 = (document.layers) ? 1 : 0;
    isNS6 = navigator.appVersion.charAt(0) == 5 
                  && navigator.appName.charAt(0) == "N";


    var Layer_Message = "<Table border=0 width=100 height=100 
        Bgcolor='#8899bb'><Tr><Td>画面上をＤｎＤ</Td></Tr></Table>";

//レイヤーの書き込み
    if ( isIE4 || isNS6 ){
      document.write("<Div id='MSG' style='position:absolute;display:
                                 block;top:60;left:50'>");
      document.write( Layer_Message );
      document.write("</Div>");
    } else if( isNS4 ) {
      document.write("<Layer name='MSG'
                    visibility='show'top='60'left='50'>");
      document.write( Layer_Message );
      document.write("</Layer>");
    }

//マウスイベントの取得
    if (isNS4){
      document.captureEvents(Event.MOUSEMOVE|
                  Event.MOUSEDOWN|Event.MOUSEUP);
    }
    document.onmousemove = mousemove;
    document.onmousedown = mousedown;
    document.onmouseup = mouseup;

//グローバル変数の宣言
    var mousecheck = false;
    var nowX = 0 , nowY = 0;
    var mouseX = 0 , mouseY = 0;

//マウスクリックダウンによる動作
    function mousedown(myEvents){
      mousecheck = true;
      NowMouseLocation(myEvents);

      if (isIE4 || isNS6){
        Llo = document.getElementById("MSG");
        nowX = parseInt(Llo.style.left,10);
        nowY = parseInt(Llo.style.top, 10);
      } else if (isNS4){
        nowX = document.layers["MSG"].left;
        nowY = document.layers["MSG"].top;
      }
      nowX = mouseX - nowX;
      nowY = mouseY - nowY;
    }

//マウスクリックアップによる動作
    function mouseup(myEvents){
      var mouseX = 0 , mouseY = 0;
      mousecheck = false;
    }

//マウスクムーブによる動作
    function mousemove(myEvents){
      if (!mousecheck) return;

      NowMouseLocation(myEvents);
      if (isIE4 || isNS6){
        el = document.getElementById("MSG");
        el.style.left = mouseX - nowX
        el.style.top  = mouseY - nowY;
      } else if (isNS4) {
        document.layers["MSG"].
            moveTo(mouseX - nowX,mouseY - nowY);
      }
    }


//マウスの現在位置取得
  function NowMouseLocation(myEvents){
    if (isIE4){
      mouseX = window.event.clientX + 
                      document.body.scrollLeft; 
      mouseY = window.event.clientY + 
                      document.body.scrollTop ;
    }else if(isNS6 || isNS4) {
      mouseX = myEvents.pageX;
      mouseY = myEvents.pageY;
    }
  }

  </Script>
</Head>
<Body>
　画面上の任意の位置をドラッグアンドドロップしてください<Br>
　レイヤーがその動作にあわせて動きます。
</Body>
</Html>

■動作例

　さて、行数の長いスクリプトですが、処理操作はこれまでの延長線上ですのでそれほど厄介なことはありません。
　このスクリプトは、

「１」	マウスをクリックダウンしたときに、現在のマウスの位置とレイヤーの位置の差分を「 nowX 」「nowY 」に格納する
「２」	マウスをクリックダウンしながら移動させた場合に、その移動量をレイヤーに代入して表示へ反映させる
「３」	マウスをクリックアップしたときに、レイヤーの動作を行わないようにする

　の３つを統合的に処理しています。　それでは、順を追って説明いたしましょう。

「１」

　まず、通常の状態、つまり、マウスをクリックしていない状態でマウスを動かしても、レイヤーの動作を行わないようにする必要があります。このため、マウスをクリックダウンしたときに「 mousecheck 」グローバル変数を「 true 」にし、「 mousemove () 」ファンクションは、　この 「 mousecheck == true」の時のみ動作 するように組まれています。

　マウスがクリックダウンされたとき発動する「 mousedown() 」ファンクションは、マウスがクリックされたことを示す「mousecheck == true 」を行った後、マウスの現在位置とレイヤーの現在位置の差分を nowX と nowY へ格納します。

マウス位置とレイヤーとの差分
　レイヤーとマウスのクリック位置の相関関係は、ユーザーの任意のクリックに任されているため不定値です。　このため、クリックされたときにレイヤーとマウスとの差分を算出して、移動時にその値を付加した値をレイヤーの位置に反映させることで、どの位置からクリックしてもスムースなアクセスが可能になります。


      nowX = mouseX - nowX;
      nowY = mouseY - nowY;

　この計算は、nowX を差分値として扱うために、マウスの位置からレイヤーの位置を減算しています。

「２」

　クリックされた後マウスを動かす場合、「 mousemove() 」ファンクションが発動します。
　前記したとおり、クリックしていない状態でのマウス移動は無効にする必要がありますので、


      if (!mousecheck) return;

　とする条件分岐分を最初に追加することで、スクリプトを強制的に終了するようにしてあります。

さて、実際の移動ですが、これは、「 NowMouseLocation() 」ファンクション を用いてリアルタイムに「 mouseX 」、「 mouseY 」へ格納されていきます。
　この「 mouseX 」と「 mouseY 」の移動量は、「 mouseX - nowX 」と「 mouseY - nowY 」によって算出することが出来ます。

マウス移動量とレイヤーの移動量
　この差分値をレイヤーの数値として実際に代入すれば、マウスを動かした分だけ、レイヤーを動かすことが可能になります。

「３」

　マウスのクリックを止めたときに発動する 「 mouseup() 」 は、これ以上レイヤーを動作させることが無いように、「 mousecheck = false 」としています。

　このスクリプトは、マウスクリックからムーブ、アップまでの３段階をリアルタイムで受信することで、ユーザー参加型のホームページの基本的な部分を作成することが可能になっています。

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