moveLAYER()

moveLAYER()

レイヤーを指定した位置へ移動させるためのサンプルファンクションです。n4ではレイヤ－を移動させるメソッドmoveTo(x座標,y座標)を使い、e4ではx,y方向へ移動させるプロパティpixelLeft=x座標とpixelTop=y座標、e5,e6,n6,m1,o6,o7,s1ではleft=x座標とtop=y座標を使っています。これらのx座標,y座標の部分へ「ブラウザ左端からの位置」と「ブラウザ上端からの位置」をピクセル(整数)で代入しています。 ieではposLeft,posTop(実数)も使えます。

*このファンクションをコピーして<script>と</script>の間にペーストしておくだけでこの機能をクロスブラウザに利用できるようになります。
*Mac/Linux版Opera6ではonclick="命令"だけだとリロードがかかり初期化してしまうのでonclick="命令 ; return false" という記述が必要です。

Cross-Browser のための Sample Function


//--レイヤ－名で処理する場合

Syntax : moveLAYER('レイヤ－名',x座標,y座標) 





  function moveLAYER(layName,x,y){
    if(document.getElementById){        //e5,e6,n6,n7,m1,o6,o7,s1用
        document.getElementById(layName).style.left = x
        document.getElementById(layName).style.top  = y
    } else if(document.all){            //e4用
        document.all(layName).style.pixelLeft = x
        document.all(layName).style.pixelTop  = y
    } else if(document.layers)          //n4用
        document.layers[layName].moveTo(x,y)
  }

Example

<script type='text/javascript'>
<!--

  function moveLAYER(layName,x,y){
    if(document.getElementById){        //e5,e6,n6,n7,m1,o6,o7,s1用
        document.getElementById(layName).style.left = x
        document.getElementById(layName).style.top  = y
    } else if(document.all){            //e4用
        document.all(layName).style.pixelLeft = x
        document.all(layName).style.pixelTop  = y
    } else if(document.layers)          //n4用
        document.layers[layName].moveTo(x,y)
  }

//-->
</script>

<!--↓このレイヤ－上のリンクをクリックすると移動します///////////-->
<div id="test" 
 style="position : absolute  ;
        left     : 10px      ;
        top      : 10px      ;">
<a href="#" onclick="moveLAYER('test',200,100);return false">
クリックすると移動します</a>
</div>



//--オブジェクト名で処理する場合

上記の関数をレイヤー名の代わりにオブジェクトで処理するようにしたもの。
ブラウザ毎の実装オブジェクト処理が別立てになるので関数がシンプルになる。

Syntax : moveLAYERoj(オブジェクト,x座標,y座標) 





  function moveLAYERoj(oj,x,y){
    if(document.getElementById){        //e5,e6,n6,n7,m1,o6,o7,s1用
      oj.left = x
      oj.top  = y
    } else if(document.all){            //e4用
      oj.pixelLeft = x
      oj.pixelTop  = y
    } else if(document.layers)          //n4用
      oj.moveTo(x,y)
 }


Example

<script type='text/javascript'>
<!--

  function moveLAYERoj(oj,x,y){
    if(document.getElementById){        //e5,e6,n6,n7,m1,o6,o7,s1用
      oj.left = x
      oj.top  = y
    } else if(document.all){            //e4用
      oj.pixelLeft = x
      oj.pixelTop  = y
    } else if(document.layers)          //n4用
      oj.moveTo(x,y)
 }

  //--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>

<!--↓このレイヤ－上のリンクをクリックすると移動します///////////-->
<div id="test" 
 style="position : absolute  ;
        left     : 10px      ;
        top      : 10px      ;">
<a href="#" onclick="moveLAYERoj(getLayStyleOj('test'),200,100);return false">
クリックすると移動します</a>
</div>