|
|
| レイヤを使いこなす |
- レイヤとは、透明なシートのような物で、ブラウザはこのシートが幾重にも重なって構成されています。
何も指定しなければ一番下のシートに書かれていますので、皆さんが作成したページは
０番目のレイヤに書かれていると考えていただければ簡単に理解できると思います。
ここでは、使用していない、上部のレイヤを使いこなす方法をご紹介します。
本来、MicrosoftInternetexplorerは、このレイヤという言葉には対応していませんが、
<div>タグで全く同じことができてしまいます。
Netscapeにはレイヤが有りますが、レイヤオブジェクトで作成してしまうとIEで動作しませんので、
両ブラウザが対応している<div>を使用します。
- 重ね合わせ
レイヤは、<div>タグにstyleでPOSITION:absolute
を指定する事で実現します。
DISPLAY:none
は、初期状態では非表示に設定しています。表示させる場合は、JavaScriptでDISPLAYをblockに設定します。
Netscapeには「レイヤー」オブジェクトが標準で装備されていますが、IEには有りません。ところが両ブラウザとも<div>タグのスタイルシートでレイヤーを作成できますので、Netscapeのレイヤーオブジェクトではなく、<div>のスタイルシートで作成しておけば両方で動作することになります。
<p>
<div id="layer1" style="DISPLAY: none;POSITION:absolute;LEFT:80;TOP:40;" class="close">
<table border="1" bgcolor="#80E0E0" cellspacing=0 cellpadding=4><tr><td>
<p>これがレイヤーです。</p>
いつでも表示、非表示を切り替える事ができます。
</td></tr></table>
</div>
<p><input type="button" id="button1" value="表示" onclick="show();"></p>
<script Language=javascript>
//-->
function show() {
var objID=document.getElementById('layer1');
var buttonID=document.getElementById('button1');
if(objID.className=='close') {
objID.style.display='block';
objID.className='open';
buttonID.value='非表示';
}else{
objID.style.display='none';
objID.className='close';
buttonID.value='表示';
}
}
//-->
</script>
<p>
|
|
- レイヤの表示位置
POSITION:absolute
が設定されていない場合は、<div>タグが書かれた位置に表示されますので、表示位置を設定することはできません。
表示位置を指定できないということは重ねて表示することもできません。
表示位置は、styleでLEFTとTOPでブラウザ上の座標を指定します。
<input type=button
name=left value=左へ
onclick="move('left')">
<input type=button
name=left value=右へ
onclick="move('right')">
<p>
<div id="layer1"
style="POSITION:absolute;LEFT:0;TOP:60;
WIDTH:200">
<table border="1" bgcolor="#80E0E0" cellspacing=0
cellpadding=4><tr><td>
<p>これがレイヤーです。</p>
ボタンを押して移動できます
</td></tr></table>
</div>
<script>
function move(direction){
var objid=document.getElementById('layer1');
var objleft=parseInt(objid.style.left);
if(direction=='left'){
objleft=objleft-50;
if(objleft<0){objleft=0;}
}else{
objleft=objleft+50;
if(objleft>430){objleft=530;}
}
objid.style.left=objleft;
}
</script>
|
|
もちろんレイヤ内を画像にする事もできます。
<input type=button name=left value=左へ onclick="move('left')">
<input type=button name=left value=右へ onclick="move('right')">
<p>
<div id="layer1" style="POSITION:absolute;LEFT:0;TOP:60;">
<table border="0"><tr><td>
<img src=images/Papio3.gif>
</td></tr></table>
</div>
<script>
function move(direction){
var objid=document.getElementById('layer1');
var objleft=parseInt(objid.style.left);
if(direction=='left'){
objleft=objleft-50;
if(objleft<0){objleft=0;}
}else{
objleft=objleft+50;
if(objleft>430){objleft=530;}
}
objid.style.left=objleft;
}
</script>
|
|
この画像を動かすことができればアニメーションです。
<div id="layer1" style="POSITION:absolute;LEFT:0;TOP:60;">
<table border="0"><tr><td>
<img src=images/Papio3.gif>
</td></tr></table>
</div>
<center>
<p>
<input type=button
id=button1 value=Start onclick="movestart()">
</p>
ボタンを押していつでもスタート、ストップできます。
<p>
画像が透過GIFなら下のレイヤが透けてみえます。
</center>
<script>
var TimeInterval;
var H=10;
var V=10;
var x=0;
var y=0;
function movestart(){
var
objid=document.getElementById('button1');
if(objid.value=='Start'){
objid.value='Stop';
move();
}else{
clearTimeout(TimeInterval);
objid.value='Start';
}
}
function move(){
var objid=document.getElementById('layer1');
objid.style.left=x;
objid.style.top=y;
x+=H;
if(x>540){
x=540;
y+=V;
if(y>330){
H=-10;y=330;V=-10;
}
}
if(x<0){
x=0;
y+=V;
if(y<0){
H=10;y=0;V=10;
}
}
TimeInterval=setTimeout("move()",100);
}
</script>
|
|
|
|
|
