|
★こんなことが出来ます(サンプル) |
前回は、表示属性 visibility へ 'visible' を代入することで、あらかじめ見えなくしておいた HTML 要素を見えるようにする showLAYER() という関数を作ってみた。今回は、その逆だ。そこに見えている文字や画像、ボタンなどの HTML を手品のように見えなくしてしまう関数 hideLAYER()を作ってみよう。
*
|
hideLAYER( id名 )
|
|
Win n4 n6 moz e4 e5 , Mac n4 n6 moz e4.5 e5 , Linux n6 moz
|
|
レイヤ−を見えない状態にするために表示属性のプロパティ visibility へ 'hidden' を代入(Netscape4xでは'hidden'または'hide')するサンプルファンクション
|
<SCRIPT LANGUAGE='JavaScript'>
<!--
function hideLAYER(idName){
if(document.getElementById) //NN6,Mozilla,IE5用
document.getElementById(idName).style.visibility
= 'hidden'
else if(document.all) //IE4用
document.all(idName).style.visibility = 'hidden'
else if(document.layers) //NN4用
document.layers[idName].visibility = 'hide'
}
//-->
</SCRIPT>
<!--↓このリンクをクリックすると-->
<A HREF="javascript:hideLAYER('test0')">
クリックすると表示されていたレイヤ−が消える</A>
<!--↓このレイヤ−が消える-->
<DIV ID = "test0"
STYLE="position : relative ;
font-size : 24pt ;
">
<FONT FACE="Arial">さようなら</FONT>
</DIV>
|
|
サンプル クリックすると表示されていたレイヤ−が消える
さようなら
|
|
上記サンプルは"test0"というDIVを
リンククリックのタイミングで hideLAYER('test0')を起動し、見えなくしている。
hideLAYER('test0')の中では自動的にブラウザを検知してIE4やIE5、NN4、Mozillaなどそれぞれの方法でvisibilityが自動的にセットされるようになっている。
ちなみに、この場合、"test0"へCSSの position : relative (またはabsolute)を指定することはNN4では必須だが、IEやNN6/Mozillaでは無くても動作する。
|
|
★次のページにサンプルと応用スクリプトを用意しました。
|
次のページ→|
シリーズ目次 |
