ボタンをクリックすると今までそこになかった画像が出現します。L01のdivタグの中の文字列を画像に取り替えただけのものです。このようにposition指定されたブロックの中には文字列だけでなく画像やボタンフォームなどのHTMLを記述してさまざまな効果を出すことができます。
応用 :
画像を取り替えたり出現場所を変えたりしてみましょう。
参照 : オブジェクトの有無を調べる 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'
}
//-->
</script>
</head>
</body>
<div id="test0"
style="position : relative ;
left : 10px ;
top : 0px ;
color : green ;
font-size : 24pt ;
visibility : hidden ;">
<img src="BOTAN.GIF" width=120 height=90>
</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サイト
| オンラインサポートページ(回線をつないでください)