【Javascript】クロスブラウザを制する Part 2　2-6 背景色set

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

/*/////////////// 背景色set用指定用関数 20011219 UseFree
========================================================
 Win  n4 n6 moz e4 e5 e6,
 Mac  n4 n6 moz e4.5 e5,
 Linux n4 n6 moz          
========================================================
 使用例  //レイヤ－の背景色を指定する
  setBGCOLOR('レイヤ－名',color)        
                          //レイヤ－の背景色を指定する
  setBGCOLOR('レイヤ－名','transparent')
                          //レイヤ－の背景色を透明にする
  setBGCOLOR('レイヤ－名','')           
                          //レイヤ－の背景色を透明にする
 Support http://game.gr.jp/js/
=======================================================*/

function setBGCOLOR(layName,color){
  if(color=='')color='transparent'
  if(document.getElementById)       //N6,Moz,IE5,IE6用
    document.getElementById(layName).style.backgroundColor
                                                    =color
  else if(document.all)             //IE4用
    document.all(layName).style.backgroundColor=color
  else if(document.layers){         //NN4用
    if(color=='transparent')color=null
      document.layers[layName].bgColor=color 
  }
}

/*////////////////////// 背景色set用指定用関数ここまで */


//--フェイド関数 fadeCOLOR('レイヤ－名',swt) 
//  swtは 'in'でフェイドイン | 'out'でフェイドアウト
a = new Array()

function fadeCOLOR(layName,swt){

    if(!window.a[layName]) a[layName] =0 

    if(swt=='out')     var f  = "fedcba9876543210"
    else if(swt=='in') var f  = "0123456789abcdef"
    else               var f  = "fedcba9876543210"

    if( a[layName] < f.length ){
       var b = f.charAt(a[layName])

       setBGCOLOR( layName , '#'+b+b+b+b+b+b )

       a[layName]++
       setTimeout('fadeCOLOR("'+layName+'","'+swt+'")',30)

    } else {

       var e = f.charAt((f.length-1))
       setBGCOLOR( layName , '' )
       a[layName] =0 

    }
}

//-->
</script>
<style>
<!--

.lays {     position:absolute;color:orange; 
            left:100px;padding:2px;
            width:250px;height:20px;
            clip:rect(0,250,20,0);
            /* N4はwidthとheightとclipの指定が必須 */
      }
-->
</style>

<!--↓これらのレイヤ－の背景色がフェイドイン-->

  <div id="a0" class="lays" style="top:180px">
    <a href="http://xxx.xxx/" 
       target="a"
       onmouseover="fadeCOLOR('a0','in')">
    <font color="orange">Allabout>JavaScript </font></a>
  </div>
       <!--↑N4対応したいときはレイヤー内のリンク文字色は
              CSSを使うと崩れるのでfontタグで指定する-->

  <div id="a1" class="lays" style="top:210px">
    <a href="http://xxx.xxx/"
       target="a"
       onmouseover="fadeCOLOR('a1','in')">
    <font color="orange">CloseUP!クロスブラウザ目次</font></a>
  </div>

  <div id="a2" class="lays" style="top:240px">
    <a href="http://xxx.xxx/"
       target="a"
       onmouseover="fadeCOLOR('a2','in')">
    <font color="orange">位置/移動 top left (3) </font></a>
  </div>

  <div id="a3" class="lays" style="top:270px">
    <a href="http://xxx.xxx/"
       target="a"
       onmouseover="fadeCOLOR('a3','in')">
    <font color="orange">HTML出力  </font></a>
  </div>