No.12 マウスをクリックダウンした時の動作
02 レイヤー判定ルーチン
 
 レイヤーの数は製作者によって異なってきますし、そのレイヤーのzIndex、つまり重なり順序も、ユーザーの使用状況によって異なってきます。また、どのレイヤーが表示されているかどうかもまちまちです。 この為、スクリプトではレイヤーの判定を行う際に、必ず全てのレイヤーを検知する必要があります。

リンク判定(IE5 Only)  「Line 493〜497」



 検出前段階として、IE5にのみ与えられている機能が、リンク判定になります。
 この条件文は、マウスが現在乗っている部分がハイパーリンクであるかどうかを判定し、ハイパーリンク上であった場合は無条件でファンクションを終了するというものです。
 IE5オンリーなのは、ネットスケープ系ブラウザではこの機能をサポートしていないからですが、このスクリプトを組み込むことによって、IEではレイヤー上のハイパーリンクを瞬時に反応させることが可能になります。

「Line 493〜497」


  if (isIE5){
    if ( window.event.srcElement.
          tagName.toLowerCase() == "a" ) return;
  }

window.eventは、ウインドウ上のイベントを返す命令で、これに secElement.tagName.toLowerCase()を追加すると、
 window.event.srcElement.tagName.toLowerCase()
 となります。 この命令は、マウス上にあるタグの名称をリアルタイムに返すので、「a」、つまりハイパーリンクを検出させるには、上のスクリプトのように設定をすれば良いということになります。

対象レイヤーの選定  「Line 504〜509」



 レイヤーの重なり判定順にレイヤーを検査していけば、同じ位置にレイヤーが複数配置されていた場合等に、上のレイヤーを選択対象として最初に検査することが可能になります。
 zIndexの値は、数字が大きいほど上に表示される性質があるので、上から順にレイヤーを検査するには、

「line 504〜509」



  for(Soat = 0 ; Soat ≤ FileCount ; Soat ++){
    var S_Number = (FileCount-1) - MasterCount;
    if (zIndexData[Soat] == S_Number){
      SoatNumber = Soat;break;
    }
  }

 上のスクリプトのように
 (FileCount - 1) - MasterCount ( MasterCount は [ for ] でカウント )
 で求めることが可能になります。

選定レイヤーとマウス座標との比較  「Line 511〜524」



 選定したレイヤーの判定は、レイヤーのデータを入手して、その値を比較することで行います。

「Line 511〜523」


  if (LayerBeing[SoatNumber]){
    if (isIE5 || isIE6 || isNS6){
      nowLocation = document.getElementById
                    ("Hopup_Message" + SoatNumber );
      nowX = parseInt(nowLocation.style.left,10);
      nowY = parseInt(nowLocation.style.top, 10);
    } else if (isNS4){
      nowX = document.layers["Hopup_Message"+  SoatNumber ].left;
      nowY = document.layers["Hopup_Message"+  SoatNumber ].top;
    }
  }

 比較用アルゴリズムは、「IE5」「NS6」用と、「NS4」用の2つに分岐させてそれぞれのブラウザに合った計算式を適応していますが、結果的に nowX , nowY の値にレイヤーの左上の座標を格納しています。
 レイヤーにはそれぞれ「 Hopup_MessageXX 」で決められており、このXXに、読み込みたいレイヤー番号、ここでは「SortNumber」を追加してやることによって、任意のレイヤーの各種情報を取出しすることが可能になります。

「Line 524」



  if ( ( (mouseX >= nowX ) && (nowX + widX >= mouseX) ) &&
       ( (mouseY >= nowY)  && (nowY + widY >= mouseY) ) &&
                                   DisplayData[SoatNumber] != 0){

 レイヤーの範囲とマウスの位置が合致しているかどうかをチェックする判定文は、

  1:

レイヤーX座標よりマウスのX座標のほうが数値が大きい

  2:

レイヤーY座標よりマウスのY座標のほうが数値が大きい

  3:

「レイヤーのX座標+レイヤーのX座標検知範囲値」よりマウスのX座標のほうが数値が小さい

  4:

「レイヤーのY座標+レイヤーのY座標検知範囲値」よりマウスのY座標のほうが数値が小さい

  5:

画面上にレイヤーが表示されている(値が「0」でない)
の、5つの条件が全て合致した場合にTRUEとなります。



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