【Javascript】クロスブラウザを制する Part 2　2-11 文字色変更

/*////////////////////// 文字色set用指定用関数   UseFree
========================================================
 Win  n6 moz e4 e5 e6,
 Mac  n6 moz e4.5 e5,
 Linux n6 moz         

 *n4では動作しません。
========================================================
 使用例  //レイヤ－の文字色を指定する
 setFGCOLOR('レイヤ－名',color)
 Support http://game.gr.jp/js/
=======================================================*/

function setFGCOLOR(layName,color){ 
  if(document.all)                  //IE4用
    document.all(layName).style.color=color
  else if(document.getElementById)  //N6,Moz,IE5,IE6用
    document.getElementById(layName).style.color=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])

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

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

    } else {

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

    }
}

/*////////////////// slideLAYERs-UseFree- //////////////*/
var wx=new Array(),wy=new Array(),count=new Array()
var ex=new Array(),ey=new Array(),spd=new Array()
var step=new Array(),stepX=new Array(),stepY=new Array()
var mvFlag=new Array(),slideID=new Array()

function 
  slideLAYERs(layName,startX,startY,endX,endY,speed,stpx){

    //--移動初期化
    if(!mvFlag[layName]){
     if(document.layers)clearTimeout(slideID[layName])
      count[layName]=0          //--移動回数カウント
      var ofX=(endX-startX)     //--移動距離x
      var ofY=(endY-startY)     //--移動距離y
      step[layName]=
        Math.max(Math.abs(ofX),Math.abs(ofY))/stpx 
      stepX[layName]=ofX/step[layName]  //--移動量x
      stepY[layName]=ofY/step[layName]  //--移動量y
      wx[layName]=startX        //--移動中のx座標
      wy[layName]=startY        //--移動中のy座標
      ex[layName]=endX          //--到着場所のx座標
      ey[layName]=endY          //--到着場所のy座標
      spd[layName]=speed        //--移動スピ－ド
      mvFlag[layName]=true      //--移動中ならtrue
    }
    if(mvFlag[layName]&&(count[layName]<=step[layName]-1)){
      count[layName]++
      wx[layName]+=stepX[layName]
      wy[layName]+=stepY[layName]
      if(document.layers)clearTimeout(slideID[layName])
      slideID[layName]=
      setTimeout('slideLAYERs("'+layName+'")',spd[layName])
    }else{
      //--停止
      wx[layName]=ex[layName]
      wy[layName]=ey[layName]
      clearTimeout(slideID[layName]);mvFlag[layName]=false
    }
    //--移動
  if(document.getElementById){
    document.getElementById(layName).style.left=wx[layName]
    document.getElementById(layName).style.top=wy[layName]
  }
  else if(document.layers)
    document.layers[layName].moveTo(wx[layName],wy[layName])
  else if(document.all){
    document.all(layName).style.pixelLeft=wx[layName]
    document.all(layName).style.pixelTop=wy[layName]
  }
}

//-->
</script>

<style>
<!--
.links {    position : absolute         ;
            left     : 200px            ;
       } 
.lays  {    position : absolute         ;
            color    : #ffffff          ;
            left     : 200px            ;
       }
-->
</style>


<!--↓これらのレイヤ－がフェイドインしながら移動します-->
  <div id="a0" class="lays" style="top:180px">★
  </div>
  <div id="a1" class="lays" style="top:210px">★
  </div>
  <div id="a2" class="lays" style="top:240px">★
  </div>
  <div id="a3" class="lays" style="top:270px">★
  </div>


  <div class="links" style="top:180px">
    <a href="http://x.gr.jp/" 
       target="a"
       onmouseover="fadeCOLOR('a0','in')
                    ;slideLAYERs('a0',-100,180,200,180,10,20)">
    <font color="orange">Allabout>JavaScript</font></a>
  </div>


  <div class="links" style="top:210px">
    <a href="http://x.gr.jp/"
       target="a"
       onmouseover="fadeCOLOR('a1','in')
                    ;slideLAYERs('a1',-100,210,200,210,10,20)">
    <font color="orange">CloseUP!クロスブラウザ目次</font></a>
  </div>

  <div class="links" style="top:240px">
    <a href="http://x.gr.jp/"
       target="a"
       onmouseover="fadeCOLOR('a2','in')
                    ;slideLAYERs('a2',-100,240,200,240,10,20)">
    <font color="orange">位置/移動 top left (3) </font></a>
  </div>

  <div class="links" style="top:270px">
    <a href="http://x.gr.jp/"
       target="a"
       onmouseover="fadeCOLOR('a3','in')
                    ;slideLAYERs('a3',-100,270,200,270,10,20)">
    <font color="orange">HTML出力 </font></a>
  </div>