JavaScript,ダイナミックHTMLツール-レイヤードロー

機能

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

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

このスクリプトを使えば、IE、NNに拘わらずにスタイルを含めた表示が可能になるので、作業効率はかなり向上します。

利用方法

スクリプトをHEAD部に挿入します。（ただし、バージョンチェックも必要）

ここで、引数についての説明をしておきますと、

ly: レイヤーオブジェクト名（簡単に済ませるにはレイヤーセットを用いる）
show: 表示形式（「0」＝非表示、「1」＝フォントサイズを直接指定し表示、「2」＝CSSのクラスセレクタを使って表示）
com: 表示する文字（テキスト）
x: 表示する位置（横方向：Ｘ）
y: 表示する位置（縦方向：Ｙ）
s: 「show」が「1」の時はフォントサイズ、「show」が「2」の時はクラスセレクタ
c: 表示するテキストのカラーコード
w: 表示するテキストの幅

function Draw(ly,show,com,x,y,s,c,w){
	if(iIE4){
		switch(show){
			case 0:
				ly.style.visibility = "hidden";
			break;
			case 1:
				ly.style.posLeft = x;
				ly.style.posTop = y;
				ly.innerHTML = com;
				ly.style.fontSize = s + "pt";
				ly.style.color = c;
				ly.style.width = w;
				ly.style.visibility = "visible";
			break;
			case 2:
				ly.style.posLeft = x;
				ly.style.posTop = y;
				s = "<DIV CLASS=\'"+s+"\'>"+com+"<\/DIV>";
				ly.innerHTML = s;
				ly.style.color = c;
				ly.style.width = w;
				ly.style.visibility = "visible";
			break;
		}
	}
	if(iNN4){
		switch(show){
			case 0:
				ly.visibility = "hide";
			break;
			case 1:
				ly.document.open();
				ly.document.fgColor = c;
				ly.document.write("<DIV STYLE=\'font-size:",s,"pt;\'>",com,"<\/DIV>");
				ly.document.close();
				ly.left = x;
				ly.top = y;
				ly.visibility = "show";
			break;
			case 2:
				ly.document.open();
				ly.document.fgColor = c;
				ly.document.write("<DIV CLASS=\'",s,"\'>",com,"<\/DIV>");
				ly.document.close();
				ly.left = x;
				ly.top = y;
				ly.visibility = "show";
			break;
		}
	}
}

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

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

スクリプトとして次のような場合（画面に文字列表示）、上記の関数（Draw(lay1,1,Comm1,50,50,10,"#ff0000",250);など）を使います。（ただし、レイヤーセットも必要）

var F = true;
var Comm1="OBJECT - iL0";
var Comm2="OBJECT - iL12";

function Show(){
	var lay1,lay2;

	lay1 = SetLayer("iL","0","");
	lay2 = SetLayer("iL","1","2");

	if(F){
		Draw(lay1,1,Comm1,50,50,10,"#ff0000",250);
		Draw(lay2,0,0,0,0,0,0,0);
	}else{
		Draw(lay1,0,0,0,0,0,0,0);
		Draw(lay2,1,Comm2,50,50,10,"#0000ff",250);
	}
	F = !F;
	setTimeout("Show()",1000);
}

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

<BODY onload="Show()">

レイヤードロー

機能

利用方法

対応ブラウザ