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

  //--イベント処理部
  document.onmousemove = mmv  //--マウスを動かすとmmv()を実行 
  document.onmousedown = mdw  //--マウスを押下で  mdw()を実行 
  document.onmouseup   = mup  //--マウスを上げるとmup()を実行 

  if(document.layers)  //-N4用イベントキャプチャ開始処理
      document.captureEvents(Event.MOUSEMOVE|Event.MOUSEDOWN|Event.MOUSEUP)


  mvswt=false          //マウス押下げフラグ

  function mdw(e){
    mvswt = true       //マウス押下げでtrue
    return false
  }

  function mup(e){
    mvswt = false      //マウス押下げでfalse
    return false
  }

  var barX = 80        //スライダーのX位置

  function mmv(e){

    if( getMouseX(e)>=85 && getMouseX(e)<=285 && mvswt ){
      barX = getMouseX(e)-5
      moveLAYER('pen',barX,130)//スライダーを動かす
    }

    var data = "目盛りは [ " + parseInt((barX -80),10) 
        data += " ] マウスのX座標は " + getMouseX(e) 
             +  "  :  Y座標は "       + getMouseY(e)
    status = data //ステータス行へデータ表示

  }


  //--レイヤー移動用関数
  function moveLAYER(layName,x,y){
      if(document.getElementById){                                   //Moz,N6,IE5,IE6,OP用
        document.getElementById(layName).style.left=x
        document.getElementById(layName).style.top=y
      } else if(document.all){
        document.all(layName).style.pixelLeft=x                      //IE4用
        document.all(layName).style.pixelTop=y
      } else if(document.layers)document.layers[layName].moveTo(x,y) //N4用
  }


  //--マウスカーソル位置取得
  function getMouseX(e){
    if(window.opera)                                               //OP6用
            return e.clientX
    else if(document.all)                                            //IE4,IE5,IE6用
            return document.body.scrollLeft+event.clientX
    else if(document.layers||document.getElementById)                //N4,N6,Moz用
            return e.pageX
  }

  function getMouseY(e){
    if(window.opera)                                               //OP6用
            return e.clientY
    else if(document.all)                                            //IE4,IE5,IE6用
            return document.body.scrollTop+event.clientY
    else if(document.layers||document.getElementById)                //N4,N6,Moz用
            return e.pageY
  }

//-->
</script>
<style>
  #sliderbar{            
    position : absolute ;  
    top      : 120px    ; left     :  80px   ; 
    padding  :   0px    ; margin   :   0px   ; 
  }                      
  #pen  {
    position : absolute ; 
    top      : 130px    ; left     :  80px   ; 
    padding  :   0px    ; margin   :   0px   ;
  }
</style>
<!--スライダー-->
<div id="sliderbar"><img src="sc.gif"  border=0 
                            ondragstart="return false"></div>
<div id="pen"><img src="minbar.gif" border=0 
                            ondragstart="return false"></div>