ボタンをクリックすると今までそこに見えなかった画像が次々と出現します。L02の文字列を画像に変えたものです。absolute(絶対位置指定)なのでブラウザのサイズが変わっても画像の位置は動きません。
応用 :
大きさを変えたり出現場所を変えたりしてみましょう。ボタンの上に画像レイヤーが重なるとボタンが押せなくなるのでABOVE="bt"を指定して画像をボタンの下に表示しています。
参照 : オブジェクトの有無を調べる 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">
<img src="BOTAN.GIF" width=120 height=90>
</div>
<div class="tests" id="t1" style="top:380px;left:250px">
<img src="BOTAN.GIF" width=120 height=90>
</div>
<div class="tests" id="t2" style="top:450px;left:130px">
<img src="BOTAN.GIF" width=120 height=90>
</div>
<div class="tests" id="t3" style="top:340px;left:380px">
<img src="BOTAN.GIF" width=120 height=90>
</div>
<div class="tests" id="t4" style="top:370px;left:230px">
<img src="BOTAN.GIF" width=120 height=90>
</div>
<div class="tests" id="t5" style="top:480px;left:400px">
<img src="BOTAN.GIF" width=120 height=90>
</div>
<form>
<input type="button" value=" 押してね " onclick="cuntup()">
</form>
</body>
</html>
C01とC02の説明を参照してください
| メインメニュー
| PART1 これだけ知っていれば大丈夫
| *PART2 サンプルの紹介
| PART3 プログラムに興味を持ったら！
| PART4 JavaScript辞典
| 索引
| オンラインサポートchatボード(回線をつないでください)