【Javascript】クロスブラウザを制する Part 2　2-5 奥行きZ座標set

<script language="JavaScript">
<!--

  /* 奥行きZ座標set用指定用関数 /////////////////  UseFree
  ========================================================
   Win   n4 n6 moz e4   e5 e6,
   Mac   n4 n6 moz e4.5 e5,
   Linux n4 n6 moz     
  ========================================================
  使用例
  zindexLAYER('レイヤ－名',zindex) 
  //zindexは0から始まる整数で0が最下層
  ________________________________________________________
  Support http://game.gr.jp/js/
  ======================================================*/

  function zindexLAYER(layName,zindex){

    if(document.getElementById)         //N6,Moz,IE5,IE6用
      document.getElementById(layName).style.zIndex=zindex 
    else if(document.all)
      document.all(layName).style.zIndex=zindex    //IE4用
    else if(document.layers)
      document.layers[layName].zIndex=zindex       //NN4用

  }

  /*//////////////// 奥行きZ座標set用指定用関数ここまで */

//-->
</script>

<!--↓このボタンをクリックすると-->
<form>
<input type="button" value=" 1 " 
         onClick="zindexLAYER('layer1',1);
                  zindexLAYER('layer2',0);
                  zindexLAYER('layer3',0)">
<input type="button" value=" 2 "  
         onClick="zindexLAYER('layer1',0);
                  zindexLAYER('layer2',1);
                  zindexLAYER('layer3',0)">
<input type="button" value=" 3 "  
         onClick="zindexLAYER('layer1',0);
                  zindexLAYER('layer2',0);
                  zindexLAYER('layer3',1)">
</form>

<!--↓これらの画像の前後の重なり順が変わります-->
<div id="layer1" 
     style="position:absolute;
            left:150px;top:150px;z-index:1">
<img src="1.gif"></div>

<div id="layer2" 
     style="position:absolute;
            left:150px;top:150px;z-index:0">
<img src="2.gif"></div>

<div id="layer3" 
     style="position:absolute;
            left:150px;top:150px;z-index:0">
<img src="3.gif"></div>