クリックするとこのレイヤー内のHTMLが書き変わります

outputLAYER()

Syntax : outputLAYER('レイヤ−名',出力するHTML)

レイヤー内のHTMLをタグごと書き換えるためのサンプルファンクションです。NNではwriteまたはwritelnを使い、IEでは専用のプロパティinnerHTMLを使って書き換えます。HTMLをまるごと書き換えできるわけですからこれを使えば、アイディア次第でさまざまな応用が可能になります。

*このファンクションをコピーして<SCRIPT>と</SCRIPT>の間にペーストしておくだけでこの機能をNN,IE共通で利用できるようになります

Cross-Browser のための Sample Function
//--レイヤ−名で処理する場合

function outputLAYER(layName,html){
if(document.getElementById){ //IE5 NN6 Mozilla用
document.getElementById(layName).innerHTML=html
} else
if(document.all){ //IE4用
document.all(layName).innerHTML=html
} else
if(document.layers) { //NN4用
with(document.layers[layName].document){
open()
write(html)
close()
}
}
}

//--オブジェクト名で処理する場合(ネストがある時や大きめのスクリプト向き)

if(document.getElementById)
oj=document.getElementById(layName) //IE5 NN6 Mozilla用
else if(document.all) oj=document.all(layName) //IE4用
else if(document.layers)oj=document.layers[layName] //NN4用

function outputLAYER(oj,html){
if(document.all || document.getElementById ){ //IE NN6 Mozilla用
oj.innerHTML=html
} else
if(document.layers) { //NN4用
oj.document.open()
oj.document.write(html)
oj.document.close()
}
}

*IEがdocument.all(layName).styleではなくdocument.all(layName)であることに注意。


Example



<!--1.レイヤ−名で処理する場合-->

<SCRIPT LANGUAGE='JavaScript'>
<!--
function outputLAYER(layName,html){
if(document.getElementById){ //IE5 NN6 Mozilla用
document.getElementById(layName).innerHTML=html
} else
if(document.all){ //IE4用
document.all(layName).innerHTML=html
} else
if(document.layers) { //NN4用
with(document.layers[layName].document){
open()
write(html)
close()
}
}
}
//-->
</SCRIPT>

<!--このレイヤ−上のリンクをクリックすると変わります------------->
<DIV ID="test"
STYLE="position:absolute;
left:10px;
top:10px;
">
<A HREF="javascript:void(0)" onclick="outputLAYER('test','<H1>ばあ(^0^)</H1>')">
クリックするとこのレイヤー内のHTMLが書き変わります
</A>
</DIV>





<!--2.オブジェクト名で処理する場合-->

<SCRIPT LANGUAGE='JavaScript'>
<!--

//--レイヤーオブジェクト名を統一する
if(document.getElementById)
oj=document.getElementById(layName) //IE5 NN6 Mozilla用
else if(document.all) oj=document.all(layName) //IE4用
else if(document.layers)oj=document.layers[layName] //NN4用

function outputLAYER(oj,html){
if(document.all || document.getElementById ){ //IE NN6 Mozilla用
oj.innerHTML=html
} else
if(document.layers) { //NN4用
oj.document.open()
oj.document.write(html)
oj.document.close()
}
}

<!---->
</SCRIPT>

<BODY onLoad="ini()">

<!--このレイヤ−上のリンクをクリックすると変わります------------->
<DIV ID="test"
STYLE="position:absolute;
left:10px;
top:10px;
">
<A HREF="javascript:void(0)" onclick="outputLAYER(oj,'<H1>ばあ(^0^)</H1>')">
クリックするとこのレイヤー内のHTMLが書き変わります
</A>
</DIV>

</BODY>