DHTML -2-

　これまでのレイヤー操作は、Javascriptを用いながらも静的なものになっていました。　言うまでも無いことですが、レイヤー制御にJavascriptを用いる以上、ユーザーからの制御を行わない事には意味がありません。
　ここでは、簡単にレイヤーをユーザー側から操作するスクリプトを紹介しましょう。

レイヤーの表示と非表示

<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>TEST</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>");
    }

    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>

  <a href="javascript:layer_power(1)">ON</a>　/　
  <a href="javascript:layer_power(0)">OFF</a>　/　

</Body>
</Html>

■動作例

　上記のスクリプトは、ユーザーのクリック動作によって、レイヤーの「表示」「非表示」を切り替えることの出来るスクリプトです。「 function layer_power(cod) 」 ステートメントは、「 cod = 0 」のときは非表示に、「 cod = 1 」の時は表示を行うことの出来るファンクションです。前ページで少し触れた、「レイヤーを後から制御する」為のスクリプトである、
　　「 el = document.getElementById(識別子); el.style.メソッド」　(IE5 / NS6)
　　「 document.layers[識別子].命令」(NS4)
　を用いています。ここではもう少し詳しく説明しましょう。

ＩＥ５、ＮＳ６の場合の制御
　制御には、「 document 」オブジェクトの拡張命令（メソッド）を用います。「 document 」オブジェクトは、ブラウザにデータを直接表示させるために用意されたもので、このオブジェクトの後ろにメソッドを追加する　（例えば document.write　等太字がメソッド）事で、様々な情報をブラウザに渡すことが可能になるわけです。
　この「 document 」オブジェクトに対応するメソッドは非常に豊富なため、ここで全てを紹介できませんが、Javascript を用いる際には必ず必要となるといって過言ではないオブジェクトですので、リファレンスなどを入手してその命令の存在を確認しておくことをお勧めします。
　さて、ＩＥ５、ＮＳ６の場合では、レイヤーの識別信号を取り込むのに「getElementById(識別子)」メソッドを用います。
「 el = document.getElementById(識別子); 」 とすると、代入先「 el 」へ、対応した識別子の情報を格納することになります。厳密な意味では異なりますが、そう考えておいて差し支えは無いでしょう。
　「 el 」で取り込まれた情報は、「 el.style.メソッド」で呼び出すことも、書き込むことも出来ます。　その違いは、代入するか、代入されるかの差でしかなく、

Data = el.style.display	Data にレイヤーの表示/非表示情報を格納
el.style.display = Data	レイヤーの表示/非表示情報を Data に書き換える

といった具合になります。
　取り込まれたデータは、文字列で帰ってくるものは当然ですが、数字の場合も文字列として格納されます。例えば、レイヤーの上位置や左位置(Top , Left）等は数字で記録しますが、取り込まれたときは文字列で帰ってきます。　このため、この数値を計算式上で反映させるためには、「 parseInt 」メソッドを用いる必要があります。

Data = parseInt(el.style.top , 10)

Data にレイヤーの上位置を数字で格納

ＮＳ４の場合の制御
　ＮＳ４の場合の制御も、基本的には変わりません。　「 document 」オブジェクトのメソッドを与えてやることによって、レイヤー上に表示させる命令を変えるといった意味合いでは、Javascriptで規定してある命令記述方式と同じですが、そのメソッドが異なります。　ＮＳ４の場合のメソッドは、「 document.layers["MSG"].メソッド」といった記述になります。

レイヤーの移動

<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>TEST</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>");
    }

    function layer_location(cod){
      if (isIE4 || isNS6){
        el = document.getElementById("MSG");
        var xx = parseInt(el.style.left , 10);
        var yy = parseInt(el.style.top  , 10);
      } else if (isNS4) {
        var xx = document.layers["MSG"].left;
        var yy = document.layers["MSG"].top;
      }
      switch (cod){
        case 8 : yy = yy - 5; break; // ↑
        case 2 : yy = yy + 5; break; // ↓
        case 4 : xx = xx - 5; break; // ←
        case 6 : xx = xx + 5; break; // →
        default :
          return; break;
      }
      if (isIE4 || isNS6){
        el.style.left = xx;
        el.style.top  = yy;
      } else if (isNS4) {
        document.layers["MSG"].moveTo(xx,yy);
      }

    }

  </Script>
</Head>
<Body>

<Table border=0>
  <Tr><Td><Center><a href="javascript:layer_location(8)">↑</a></Td></Tr>
  <Tr><Td><a href="javascript:layer_location(4)">←</a>　　　
  <a href="javascript:layer_location(6)">→</a></Td></Tr>
  <Tr><Td><Center><a href="javascript:layer_location(2)">↓</a></Td></Tr>
</Table>

</Body>
</Html>

■動作例

　レイヤー移動を行うためには、
　　「１」レイヤーの現在情報を取得
　　「２」情報を変更する
　　「３」情報をレイヤー上に更新する
　の３段階を踏む必要があり、実際のコメントのカラーと同一色のスクリプト部分が、これらを行っています。
　レイヤー情報の所得　「１」　は、現在のレイヤーの上位置と左位置を、それぞれ「 xx 」と「 yy 」に記録します。
　ＩＥ５とＮＮ６の場合は、全ての信号が文字列で帰ってくる関係から、「 parseInt() 」メソッドを用いて数字に変換して格納していますが、ＮＳ４の場合は数字は数字で格納されますので、ダイレクトにレイヤーを読み込んでいます。
　データの変更　「２」　は、「 switch ～ case 」を用います。　特に意味はありませんが、対応信号は１０キーの配列に則して、「↓＝２」「↑＝８」「←＝４」「→＝６」として、それぞれの信号を受信した場合に、Ｘ座標とＹ座標を規定値だけ追加しています。
　データの書き換え　「３」　は、ＩＥ５とＮＳ６の場合では　「１」　で宣言している「el」をそのまま利用しています。　数値「ｘｘ」「ｙｙ」は数字ですが、データを挿入したときに自動的に文字列となるため、代入行為そのものはダイレクトに書いても差し支えありません。
　ＮＳ４の場合は、レイヤーの名前を入れた後、moveTo で、レイヤー座標の絶対位置を格納することになります。

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