getZINDEX()
レイヤ−の重なり(奥行きＺ方向)の順番を取得するサンプルファンクションです。
数字が大きいほど手前に表示されています。
*このファンクションをコピーして<script>と</script>の間にペーストしておくだけでこの機能をクロスブラウザに利用できるようになります。
Cross-Browser のための Sample Function
//--レイヤ−名で処理する場合
Syntax : getZINDEX('レイヤ−名')
function getZINDEX(layName,zindex){
if(document.getElementById) //e5,e6,n6,n7,m1,o6,o7,s1用
return document.getElementById(layName).style.zIndex
else if(document.all) //e4用
return document.all(layName).style.zIndex
else if(document.layers) //n4用
return document.layers[layName].zIndex
}
Example
<script type='text/javascript'>
<!--
function getZINDEX(layName,zindex){
if(document.getElementById) //e5,e6,n6,n7,m1,o6,o7,s1用
return document.getElementById(layName).style.zIndex
else if(document.all) //e4用
return document.all(layName).style.zIndex
else if(document.layers) //n4用
return document.layers[layName].zIndex
}
//-->
</script>
<!--↓このボタンをクリックすると//////////////////////-->
<form>
<input type="button" value="ZIのz-indexは..."
onClick="alert(getZINDEX('layerZI'))"><p>
<input type="button" value="NDのz-indexは..."
onClick="alert(getZINDEX('layerND'))"><p>
<input type="button" value="EXのz-indexは..."
onClick="alert(getZINDEX('layerEX'))">
</form>
<!--↓この画像の前後のz-index番号を返します////////////-->
<div id="layerZI"
style="position:absolute;left:250px;top:25px;z-index:0">
<img src="zi.gif" ALIGN="center">z-index:0</div>
<div id="layerND"
style="position:absolute;left:250px;top:70px;z-index:1">
<img src="nd.gif" ALIGN="center">z-index:1</div>
<div id="layerEX"
style="position:absolute;left:250px;top:115px;z-index:2">
<img src="ex.gif" ALIGN="center">z-index:2</div>
//--オブジェクト名で処理する場合
上記の関数をレイヤー名の代わりにオブジェクトで処理するようにしたもの。
ブラウザ毎の実装オブジェクト処理が別立てになるので関数がシンプルになる。
Syntax : getZINDEXoj(オブジェクト)
function getZINDEXoj(oj,zindex){
if(document.getElementById) //e5,e6,n6,n7,m1,o6,o7,s1用
return oj.zIndex
else if(document.all) //e4用
return oj.zIndex
else if(document.layers) //n4用
return oj.zIndex
}
Example
<script type='text/javascript'>
<!--
function getZINDEXoj(oj,zindex){
if(document.getElementById) //e5,e6,n6,n7,m1,o6,o7,s1用
return oj.zIndex
else if(document.all) //e4用
return oj.zIndex
else if(document.layers) //n4用
return oj.zIndex
}
//--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]
}
//-->
</script>
<!--↓このボタンをクリックすると////////////////////////-->
<form>
<input type="button" value="ZIのz-indexは..."
onClick="alert(getZINDEXoj(getLayStyleOj('layerZI')))"><p>
<input type="button" value="NDのz-indexは..."
onClick="alert(getZINDEXoj(getLayStyleOj('layerND')))"><p>
<input type="button" value="EXのz-indexは..."
onClick="alert(getZINDEXoj(getLayStyleOj('layerEX')))">
</form>
<!--↓この画像の前後のz-index番号を返します////////////-->
<div id="layerZI"
style="position:absolute;left:250px;top:25px;z-index:0">
<img src="zi.gif" ALIGN="center">z-index:0</div>
<div id="layerND"
style="position:absolute;left:250px;top:70px;z-index:1">
<img src="nd.gif" ALIGN="center">z-index:1</div>
<div id="layerEX"
style="position:absolute;left:250px;top:115px;z-index:2">
<img src="ex.gif" ALIGN="center">z-index:2</div>
z-index:0
z-index:1
z-index:2