ボタンをクリックすると今までそこになかった文字が次々と出現します。同じ場所へ重ねることもできます。ここで使っている機能はNN4.0/IE4.0からクロスブラウザ(ブラウザ互換)で使えます。
応用 :
文字の色や大きさを取り替えたり出現場所を変えたりしてみましょう。
参照 : オブジェクトの有無を調べる if(document.images){命令}, 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'
}
var cnt = 0
function cuntup(){
if(cnt<=5){
showLAYER( 't'+ cnt )
cnt++
}
}
//-->
</script>
<style>
.tests { position : absolute ;
color : green ;
font-size : 24pt ;
visibility : hidden ;
}
</style>
</head>
</body>
<div class="tests" id="t0" style="top:350px;left:200px">どうも(^^)/</div>
<div class="tests" id="t1" style="top:380px;left:250px">どうも(^^)/</div>
<div class="tests" id="t2" style="top:450px;left:130px">どうも(^^)/</div>
<div class="tests" id="t3" style="top:340px;left:380px">どうも(^^)/</div>
<div class="tests" id="t4" style="top:370px;left:230px">どうも(^^)/</div>
<div class="tests" id="t5" style="top:480px;left:400px">どうも(^^)/</div>
<form>
<input type="button" value=" 押してね " onclick="cuntup()">
</form>
</body>
</html>
C01の説明も参照してください<style>タグの中のvisibility : hidden は見えなくしておくということで、この場合このレイヤーにはさまれた文字が見えなくなります。見えるようにするには
もしIE4,5なら document.all('レイヤー名').style.visibility='visible' NN4なら document.layers['レイヤー名'].visibility='show' IE5,NN6なら document.getElementById('レイヤー名').style.visibility='visible' と指定しますposition : absoluteを指定した場合 left:200px ならページの左端から200ピクセル離し、top:350pxならページの上端からの350ピクセル数の場所へ表示されますcnt=0 if( cnt <= 5 ){ showLAYER( 't'+ cnt ) cnt++ }で、まずshowLAYER( 't0' )を実行し、次にcntに１を足してshowLAYER( 't2' )、showLAYER( 't3' )、showLAYER( 't4' )、...とcntが5になるまで続けて実行します
| CONTENTS
| PART1 これだけ知っていれば大丈夫
| PART2 サンプルの紹介
| PART3 JavaScript言語仕様
| PART4 JavaScriptクイック書式一覧
| PART5 JavaScriptサイト
| オンラインサポートページ(回線をつないでください)