Source

*リファレンス|A|B|C|D|E|F|G|H|I|J|K|L|M|N|O|P|Q|R|S|T|U|V|W|X|Y|Z|
*下記のソースをコピー&ペーストして使ってください。
*はじめはとりあえず緑色の部分を書き換えてみましょう。
*赤色の部分はこのScriptで最初に起動される命令です。
*★Sample←ココをクリックするとサンプルホルダが開きます(sample.htmがサンプルです)。
*ブルーの色が付いた関数(注1)は
<script src="mousex.js" type="text/javascript"></script>
<script src="mousex.js" type="text/javascript"></script>
<script src="movelayer.js" type="text/javascript"></script>
<script src="outputlayer.js" type="text/javascript"></script>
に置き換え可能です (この場合は、上記のファイル名.jsをクリックして表示されるファイルの拡張子.txtを.jsに変えて保存し、使用して下さい)。 

<html>
<head>
<title></title>
<script type='text/javascript'>
<!-- //(注1)

  //--マウスX座標get 
  function getMouseY(e){
    if(navigator.userAgent.search(
             "Opera(\ |\/)6") != -1 )   //o6用
        return e.clientY
    else if(document.all)               //e4,e5,e6用
        return document.body.scrollTop+event.clientY
    else if(document.layers ||
            document.getElementById)    //n4,n6,n7,m1,o7,s1用
        return e.pageY
  }

  //--マウスY座標get 
  function getMouseX(e){
    if(navigator.userAgent.search(
             "Opera(\ |\/)6") != -1 )   //o6用
        return e.clientX
    else if(document.all)               //e4,e5,e6用
        return document.body.scrollLeft+event.clientX
    else if(document.layers ||
            document.getElementById)    //n4,n6,n7,m1,o7,s1用
        return e.pageX
  }

  //--レイヤ−移動 
  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)
  }

  //--HTML出力 
  function outputLAYER(layName,html){
    if(document.getElementById){        //e5,e6,n6,n7,m1,o7,s1用
      document.getElementById(layName).innerHTML=html
    } else if(document.all){            //e4用
      document.all(layName).innerHTML=html
    } else if(document.layers) {        //n4用
       with(document.layers[layName].document){
         open()
         write(html)
         close()
      }
    }
  }

  //--イベントをセットする
  document.onmousemove = slider_mmv  // マウスを動かすとslider_mmv()を実行
  document.onmousedown = slider_mdw  // マウスボタン押下でslider_mmv()を実行
  document.onmouseup   = slider_mup  // マウスボタン押上でslider_mmv()を実行
  if(document.layers)                // n4用イベントキャプチャ開始
      document.captureEvents(Event.MOUSEMOVE|Event.MOUSEDOWN|Event.MOUSEUP)

  //--スライド動作スイッチ( マウスボタン押下でtrue　押上でfalse )
  var mvswt = false  

  function slider_mdw(e){
    mvswt = true   // マウスボタン押下でtrue
    return false
  }
  function slider_mup(e){
    mvswt = false  // マウスボタン押上でfalse
    return false
  }

  //--マウスが動いたときの処理

  var barX=80 // バーのleft位置

  function slider_mmv(e){

    // スライダーバーの移動処理
    if(getMouseX(e)>=85 && getMouseX(e)<=285 && mvswt){
      barX=getMouseX(e)-5
      moveLAYER('minbar',barX,130)
    }

    // 座標についてのメッセージ出力
    var html =  "<b><font color='#1e90ff' size=+2>目盛りは " 
        html += parseInt((barX -80),10) +'</font></b><br>'
        html += "マウスカーソルのX座標は " + getMouseX(e) 
                   + " : Y座標は " + getMouseY(e)
    status='目盛りは'+ parseInt((barX -80),10) +"マウスのX座標は " 
                     + getMouseX(e) + " : Y座標は " + getMouseY(e)
    outputLAYER('data',html)
  }

//-->
</script>
<style type="text/css">
<!--

  #sliderbar{            
    position : absolute  ; 
    top      : 120px     ; 
    left     :  80px     ; 
    padding  :   0px     ; 
    margin   :   0px     ; 
  }                      
  #minbar  {
    position : absolute  ; 
    top      : 130px     ; 
    left     :  80px     ; 
    padding  :   0px     ; 
    margin   :   0px     ; 
  }

-->
</style>
</head>
<body>

<div id="msg">
  スライダーをドラッグして動かしてください
</div>

<!--スライダー-->
<div id="sliderbar"><img src = "sc.gif" 
                            border = "0" 
                            ondragstart = "return false"></div>
<div id="minbar"><img src = "minbar.gif" 
                            border = "0" 
                            ondragstart = "return false"></div>

<!--このレイヤーに座標が表示されます-->
<div id="data" style="position:absolute;
                      top:200px;left:80px"></div>

</body>
</html>
Source