DHTML -2-

　それでは　「ひとつのＨＴＭＬに複数のブラウザに対応し、且つJavascriptの表記にも対応したレイヤー表記を行うためにはどうすればよいか」　ですが、これには、表記そのものを Javascript で行うといった手法を用いることによって解決することが可能になります。
　具体的に言うと、<Div> ～ </Div> タグも、<Span> ～ </Span> タグも、中に書き込む「～」の表示部分は同じですから、この「レイヤーの表示させる内容」を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 style='position:absolute;display:
                                 block;top:30;left:50'>");
      document.write( Layer_Message );
      document.write("</Div>");
    } else if( isNS4 ) {
      document.write("<Layer visibility='show'top='30'left='50'>");
      document.write( Layer_Message );
      document.write("</Layer>");
    }
  </Script>
</Head>
<Body>
</Body>
</Html>

■動作例

　上記の例の場合、[ Layer_Message ]変数に表示させるためのＨＴＭＬを記述し、個々の分岐スクリプトの中へ挿入しています。　こうすることによって、表示上の共通部分を統合し、かつ単独のＨＴＭＬ上で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 = new Array()
    Layer_Message[1] = "<Table border=0 width=100 height=100 
                Bgcolor='#8899bb'><Tr><Td>TEST</Td></Tr></Table>";

    Layer_Message[2] = "<Table border=0 width=100 height=100 
                Bgcolor='#88bb99'><Tr><Td>TEST</Td></Tr></Table>";

    for (xx = 1 ; xx < 3 ; xx ++ ){
      if ( isIE4 || isNS6 ){
        document.write("<Div style='position:absolute;display:
                     block;top:"+ (xx * 30) + ";left:"+ (xx * 50) +"'>");
        document.write( Layer_Message[xx] );
        document.write("</Div>");
      } else if( isNS4 ) {
        document.write("<Layer visibility='show'top='"
                            + (xx * 30) +"'left='"+ (xx * 50) +"'>");
        document.write( Layer_Message[xx] );
        document.write("</Layer>");
      }
    }
  </Script>
</Head>
<Body>
</Body>
</Html>

■動作例

　上のスクリプトは、２枚のレイヤーを配置することが出来るように、最初のスクリプトに「 for 」命令を付加したものです。
　表示が重なっていることが分かるように、レイヤーの表示位置を「 (xx * 30) 」「 (xx * 50 ) 」とすることで、forのループ回数分だけ縦に３０横に５０ピクセル移動して配置するようになっています。

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