zindexLAYER()
レイヤ−の重なり(奥行きＺ方向)の順番を指定するサンプルファンクションです。
プロパティ
zIndexへ数値を代入することで前後に移動させます。初期値は０で、
数値が大きいほど手前に表示されます。
ここでは、3つのレイヤのzIndexをボタンクリックで変更して画像を前へ移動させています。
style定義するときはz-indexと書きますがscriptで処理する時はzIndex(ｉが大文字)になるのに注意。
*このファンクションをコピーして<script>と</script>の間にペーストしておくだけでこの機能をクロスブラウザに利用できるようになります
Cross-Browser のための Sample Function
//--レイヤ−名で処理する場合
Syntax : zindexLAYER('レイヤ−名')
function zindexLAYER(layName,zindex){
if(document.getElementById) //e5,e6,n6,n7,m1,o6,o7,s1用
document.getElementById(layName).style.zIndex=zindex
else if(document.all) //e4用
document.all(layName).style.zIndex=zindex
else if(document.layers) //n4用
document.layers[layName].zIndex=zindex
}
Example
<script type='text/javascript'>
<!--
function zindexLAYER(layName,zindex){
if(document.getElementById) //e5,e6,n6,n7,m1,o6,o7,s1用
document.getElementById(layName).style.zIndex=zindex
else if(document.all) //e4用
document.all(layName).style.zIndex=zindex
else if(document.layers) //n4用
document.layers[layName].zIndex=zindex
}
//-->
</script>
<!--↓このボタンをクリックすると///////////////////////-->
<form>
<input type="button" value="ZI"
onClick="zindexLAYER('layerZI',1);
zindexLAYER('layerND',0);
zindexLAYER('layerEX',0)">
<input type="button" value="ND"
onClick="zindexLAYER('layerZI',0);
zindexLAYER('layerND',1);
zindexLAYER('layerEX',0)">
<input type="button" value="EX"
onClick="zindexLAYER('layerZI',0);
zindexLAYER('layerND',0);
zindexLAYER('layerEX',1)">
</form>
<!--↓この画像の前後の重なりが変わります//////////////-->
<div id="layerZI"
style="position:absolute;left:50px;top:45px;z-index:0">
<img src="../zi.gif"></div>
<div id="layerND"
style="position:absolute;left:98px;top:45px;z-index:1">
<img src="../nd.gif"></div>
<div id="layerEX"
style="position:absolute;left:146px;top:45px;z-index:0">
<img src="../ex.gif"></div>
//--オブジェクト名で処理する場合
上記の関数をレイヤー名の代わりにオブジェクトで処理するようにしたもの。
ブラウザ毎の実装オブジェクト処理が別立てになるので関数がシンプルになる。
Syntax : zindexLAYERoj(オブジェクト)
function zindexLAYERoj(oj,zindex){
oj.zIndex=zindex //e4,e5,e6,n4,n6,n7,m1,o6,o7,s1用
}
//--layNameで指定したオブジェクトを返す(必ずonload後に実行すること)
function getLayStyleOj(layName){
if(document.getElementById) //e5,e6,n6,n7,m1,o6,o7,s1用
return document.getElementById(layName).style
else if(document.all) //e4用
return document.all(layName).style
else if(document.layers) //n4用
return document.layers[layName]
}
Example
<script type='text/javascript'>
<!--
function zindexLAYERoj(oj,zindex){
oj.zIndex=zindex //e4,e5,e6,n4,n6,n7,m1,o6,o7,s1用
}
function getLayStyleOj(layName){
if(document.getElementById) //e5,e6,n6,n7,m1,o6,o7,s1用
return document.getElementById(layName).style
else if(document.all) //e4用
return document.all(layName).style
else if(document.layers) //n4用
return document.layers[layName]
}
//-->
</script>
<form><!--↓このボタンをクリックすると///////////////////////-->
<input type="button" value="ZI"
onClick="zindexLAYERoj(getLayStyleOj('layerZI'),1);
zindexLAYERoj(getLayStyleOj('layerND'),0);
zindexLAYERoj(getLayStyleOj('layerEX'),0)">
<input type="button" value="ND"
onClick="zindexLAYERoj(getLayStyleOj('layerZI'),0);
zindexLAYERoj(getLayStyleOj('layerND'),1);
zindexLAYERoj(getLayStyleOj('layerEX'),0)">
<input type="button" value="EX"
onClick="zindexLAYERoj(getLayStyleOj('layerZI'),0);
zindexLAYERoj(getLayStyleOj('layerND'),0);
zindexLAYERoj(getLayStyleOj('layerEX'),1)">
</form><!--↓この画像の前後の重なりが変わります//////////////-->
<div id="layerZI"
style="position:absolute;left:50px;top:45px;z-index:0">
<img src="../zi.gif"></div>
<div id="layerND"
style="position:absolute;left:98px;top:45px;z-index:1">
<img src="../nd.gif"></div>
<div id="layerEX"
style="position:absolute;left:146px;top:45px;z-index:0">
<img src="../ex.gif"></div>
