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