[初めてのホームページ講座] [JavaScript , DHTML] [レイヤーセット]

Dynamic HTMLの参考書 Java Scriptの参考書

レイヤーセット

機能

ダイナミックHTMLを動作させる際には、殆どレイヤーを使いこなさなくてはなりません。 しかし、複雑になればなるほどクロスブラウズが困難になるのも事実です。 しかし、工夫すればなんとかなるわけで、その工夫の1つがこのスクリプトです。

IEとNNのレイヤーの参照の仕方は異なりますので、ブラウザごとに振り分け処理をします。 しかし、元のルーチンでは同一のコールをするので、面倒なクロスブラウズに拘る必要が減ってきます。 (レイヤードローも併用すると更に効果的)

利用方法

  1. スクリプトをHEAD部に挿入します。 「a」「b」「c」を引数として引き渡して、「L」にレイヤーのオブジェクト名が代入され、関数として返されます。 (ただし、バージョンチェックも必要)
    function SetLayer(a,b,c){
    	if(iIE4){
    		L = document.all(a+b+c);
    	}
    	if(iNN4){
    		L = document.layers[a+b+c];
    	}
    	return(L);
    }
    
  2. BODY要素にID属性が「iL0」「iL12」というDIV要素が2つあったとします。
    <BODY>
    	<DIV ID="iL0" STYLE="position:absolute;top:10;"></DIV>
    	<DIV ID="iL12" STYLE="position:absolute;top:50;"></DIV>
    </BODY>
    
  3. スクリプトとして次のような場合(画面に文字列表示)、上記の関数(lay = SetLayer("iL","0","");)を使います。
    function Show(){
    	var Comm1="OBJECT - iL0";
    	var Comm2="OBJECT - iL12";
    	var lay;
    
    	lay = SetLayer("iL","0","");
    	Draw(lay,Comm1);
    
    	lay = SetLayer("iL","1","2");
    	Draw(lay,Comm2);
    }
    
    function Draw(L,com){
    	if(iIE4){
    		L.innerHTML = com;
    	}
    	if(iNN4){
    		L.document.open();
    		L.document.write(com);
    		L.document.close();
    	}
    }
    
  4. 最後に、BODY要素の属性として「onload」を追加し、ページが読み込まれたらスクリプトを開始するようにします。
    <BODY onload="Show()">
    

対応ブラウザ

IE4,NN4以上

[Go To Top]

Copyright(C)1999 T.Miyazaki , All Rights Reserved.