DHTML -2-

　重ね合わせの表現を実現することが出来ます。
　重ね合わせの順番は通常、スクリプトが呼ばれた順に上に重ねられていきます。　静的なページを作成するのであれば、最終的な重ね合わせの順番に配列を設定していけば良いので問題ないのですが、後から動的に操作を行わないといけないスクリプトでは、下のレイヤーを上に持ってきたり、逆に、上のレイヤーを下に潜らせるといった、三次元的な配置の変遷を行うことも必要になってきます。　このために、レイヤーコマンドにはオプション設定して「 z-index 」 と呼ばれる、重ね合わせの順序を規定する命令が用意されています。

重ね合わせ順の変更
　重ね合わせ順を変更することによって、例えば上記のように、緑色のレイヤーの隠れている部分を表示させるといったことも可能になります。

レイヤーの表示順序を変更する

<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";

    function Input_HopupMessage() {
      this.msg    = new Array();
      this.msg[0] = "";
      this.msg[1] = "<Table border=0 width=100 height=100 
                Bgcolor='#8899bb'><Tr><Td>TEST</Td></Tr></Table>";
      this.msg[2] = "<Table border=0 width=100 height=100 
                Bgcolor='#88bb99'><Tr><Td>TEST</Td></Tr></Table>";
      this.msg[5] = "<Table border=0 width=100 height=100 
                Bgcolor='#bb8899'><Tr><Td>TEST</Td></Tr></Table>";
    }

    var HopupMessage = new Input_HopupMessage();
    var count = 0;
    for(xx=0; xx < HopupMessage.msg.length ; xx++) {
      if (HopupMessage.msg[xx] ) {
        if ( isIE4 || isNS6 ){
          document.write("<Div id='MSG"+xx+"' style='position:absolute;
            display:block;top:"+ (count * 30) + ";left:"+ (count * 50) +"'>");
          document.write( HopupMessage.msg[xx] + "</Div>");

          el = document.getElementById("MSG" + xx);
          el.style.zIndex = HopupMessage.msg.length-xx;
        } else if( isNS4 ) {
          document.write("<Layer name='MSG"+xx+" visibility='show'top='"
                            + (count * 30) +"'left='"+ (count * 50) +"'>");
          document.write( HopupMessage.msg[xx] );
          document.write("</Layer>");

          document.layers["MSG"+xx ].zIndex = 
                                HopupMessage.msg.length-xx;
        }
        count ++;
      }
    }

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

■動作例

動作例：キャプチャー (IE5.5)
　レイヤーの情報を後から変更するためのコマンドは、ＩＥ５とＮＳ６の場合と、ＮＳ４の場合の２種類があり、互いに互換はありません。ですから条件文の中に、個別に書き込む必要があります。　また、後から変更を行うためにはこの他にも、各レイヤーに識別子を追加する必要もあります。　上記のスクリプトは、こういった一連のスクリプトを追加した例です。
　「 id='MSG"+xx+"' 」と、「 iname='MSG"+xx+" 」は、各レイヤーに識別のための名前を付けるオプションコマンドです。　前者はＩＥ５、ＮＳ６に、後者はＮＳ４にそれぞれ適応します。　同じ識別子をつけるわけには行きませんので、「 for() { ～ } 」で変数として用いている「 xx 」を、文字列"MSG"に追加したものを、個々のレイヤーの識別名にしています。
　「 el = document.getElementById("MSG" + xx) 」は、識別子「MSG + xx 」を操作するために、その操作対象を「 el 」へ代入するための式で、ＩＥ５、ＮＳ６で用います。　操作対象「 el 」は、「 el.style.～」といった記述式を用いることによって、後から制御を行うことが可能になります。
　「 document.layers["MSG"+xx ].zIndex = HopupMessage.msg.length-xx; 」は、ＮＳ４でレイヤーを後から制御する場合の式です。　最初にレイヤーの識別子を挿入し、その後にオプションを「.」で結んでひとつの識別式にします。

　さて、「 zIndex 」は、個々のレイヤーの数値を比較した際に、大きい数字の場合はその上に配置する性質があります。　上記のスクリプトでは、これまでと配置の順序を逆にしたわけですが、この場合は、「 HopupMessage.msg.length-xx 」とすることで、zIndex の値を逆順にすることが可能になります。

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