ボタンをクリックすると今までそこになかった文字が出現します。CSSのvisibility(可視性)をJavaScriptから操作していてDynamicHTMLと呼ばれる処理です。はじめ文字を見えなく設定("hidden")しておいて、ボタンクリックで見えるよう("visible"またはNN4では"show")に切り替えています。このスクリプトはIE4以上/NN4/NN6(Mozilla)で共用できます。
応用 :
文字の色や大きさを取り替えたり出現場所を変えたりしてみましょう。
参照 : バージョンチェックif(navigator.appVersion.charAt(0)>=バージョン番号){命令}, layers[], visibility, onClick,
参考 : クロスブラウザDHTMLのサンプルページ(回線をつないでください)
<html>
<head>
<title></title>
<script language="JavaScript">
<!--
function showLAYER(layName){
if(document.all)document.all(layName).style.visibility='visible'
else if(document.layers)document.layers[layName].visibility='show'
else if(document.getElementById)
document.getElementById(layName).style.visibility='visible'
}
//-->
</script>
</head>
</body>
<div id="test0"
style="position : relative ;
left : 10px ;
top : 0px ;
color : green ;
font-size : 24pt ;
visibility : hidden ;">
どうも(^^)/
</div>
<form>
<input type="button" value=" 押してね " onClick="showLAYER('test0')">
</form>
</body>
</html>
たとえば、上記のようにstyleへpositionを定義した<div>と</div>の間に文字やIMGやボタンやフォームなどをはさんでおくことでJavaScriptであとからそれらをコントロールできるようになります<style>タグの中のvisibility : hidden は見えなくしておくということで、この場合このレイヤーにはさまれた文字が見えなくなります。見えるようにするには
もしIE4,5なら document.all('レイヤー名').style.visibility='visible' NN4なら document.layers['レイヤー名'].visibility='show' IE5,NN6なら document.getElementById('レイヤー名').style.visibility='visible' と指定しますposition : relativeを指定した場合、このDIVが置かれた位置を基点として left:10px なら左から10ピクセル離し、top:0pxなら上からの0ピクセル数の場所へ表示されます。position:absoluteなら絶対位置していになります
| CONTENTS
| PART1 これだけ知っていれば大丈夫
| PART2 サンプルの紹介
| PART3 JavaScript言語仕様
| PART4 JavaScriptクイック書式一覧
| PART5 JavaScriptサイト
| オンラインサポートページ(回線をつないでください)