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

レイヤーセット

機能

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

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

利用方法

スクリプトを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);
}
```

BODY要素にID属性が「iL0」「iL12」というDIV要素が２つあったとします。

<BODY>
	<DIV ID="iL0" STYLE="position:absolute;top:10;"></DIV>
	<DIV ID="iL12" STYLE="position:absolute;top:50;"></DIV>
</BODY>

スクリプトとして次のような場合（画面に文字列表示）、上記の関数（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();
	}
}

最後に、BODY要素の属性として「onload」を追加し、ページが読み込まれたらスクリプトを開始するようにします。
```
<BODY onload="Show()">
```

対応ブラウザ

IE4,NN4以上

[Go To Top]