JAVASCRIPT在图片中取一个坐标点，鼠标点住左键拉伸一定区域，我想要得到这个点的坐标x,y值，还有拉伸一定区域的长，宽值。哪位js高手帮我看看怎么弄

JAVASCRIPT在图片中取一个坐标点，鼠标点住左键拉伸一定区域，我想要得到这个点的坐标x,y值，还有拉伸一定区域的长，宽值
 <html>   
    
  <head>   
  <meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312">   
  <title>新建网页   4</title>   
  </head>   
    
  <body>   
  &nbsp;<br>X:<input   type="text"   id="X"   readonly>   
  Y:<input   type="text"   id="y"   readonly>   
  <script   language="javascript">   
    
  function   showCoordinate(obj){   
  var   r   =   getAbsolutePos(obj);   
  var   x   =   document.getElementById("X");   
  var   y   =   document.getElementById("Y");   
    
  x.value   =   event.clientX   -r.x-3;   
  y.value   =   event.clientY   -r.y-3;   
  }   
    
  function   getAbsolutePos(el)   {   
  var   r   =   {   x:   el.offsetLeft,   y:   el.offsetTop   };   
  if   (el.offsetParent)   {   
  var   tmp   =   getAbsolutePos(el.offsetParent);   
  r.x   +=   tmp.x;   
  r.y   +=   tmp.y;   
  }   
  return   r;   
  }   
    
  </script>   
  <table   border="1"   width="100%"   id="table1">   
  <tr>   
  <td   width="181"   height="210">　</td>   
  <td   height="210">   
  　</td>   
  <td   height="210">　</td>   
  </tr>   
  <tr>   
  <td   width="181"   height="172">　</td>   
  <td   height="172">   
  <p   align="center">   
  <img   src="D:\\file\\2007518143110.jpg"   onmousemove="showCoordinate(this);"   width="330"   height="90"></td>   
  <td   height="172">　</td>   
  </tr>   
  <tr>   
  <td   width="181">　</td>   
  <td>   
  　</td>   
  <td>　</td>   
  </tr>   
  <tr>   
  <td   width="181">　</td>   
  <td>　</td>   
  <td>　</td>   
  </tr>   
  </table>   
  </body>   
    
  </html>
现在我只能得到x,y坐标值，可拉伸范围之怎么得？

解决方案 »

  1.   


    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>新建网页 4 </title>
    </head>
      
    <body>
    X: <input type="text" id="X" readonly>
    Y: <input type="text" id="Y" readonly>
    <br/>
    startX: <input type="text" id="startX" readonly>
    startY: <input type="text" id="startY" readonly>
    <br/>
    endX: <input type="text" id="endX" readonly>
    endY: <input type="text" id="endY" readonly>
    <br/>
    移动距离X: <input type="text" id="XX" readonly>
    移动距离Y: <input type="text" id="YY" readonly><script language="javascript">
    function showCoordinate(obj){ 
    var r = getAbsolutePos(obj);
    var x = document.getElementById("X"); 
    var y = document.getElementById("Y"); 
     
    x.value = event.clientX - r.x - 3;
    y.value = event.clientY - r.y - 3;
    } function getAbsolutePos(el) { 
    var r = { x: el.offsetLeft, y: el.offsetTop }; 
    if (el.offsetParent) { 
    var tmp = getAbsolutePos(el.offsetParent); 
    r.x += tmp.x; 
    r.y += tmp.y; 
    } 
    return r; 
    } var drag = false;
    function initStartPoint(img){
    document.getElementById("startX").value = document.getElementById("X").value;
    document.getElementById("startY").value = document.getElementById("Y").value;
    drag = true;
    }document.onmouseup=function(){
    // 如果正在拖动
    if(drag){
    var r = getAbsolutePos(document.getElementById("img1"));
    document.getElementById("endX").value = event.clientX - r.x - 3;
    document.getElementById("endY").value = event.clientY - r.y - 3; document.getElementById("XX").value = event.clientX - r.x - 3 - document.getElementById("startX").value;
    document.getElementById("YY").value = event.clientY - r.y - 3 - document.getElementById("startY").value;
    drag = false;
    }
    }
    </script>
    <table border="1" width="100%" id="table1">
    <tr>
    <td width="181" height="210"></td>
    <td height="210"></td>
    <td height="210"></td>
    </tr>
    <tr>
    <td width="181" height="172"></td>
    <td height="172">
    <p align="center">
    <img id="img1" src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" 
    onmousemove="showCoordinate(this);" 
    onmousedown="initStartPoint(this)"
    onselectstart="return false;"
    ondrag="return false;"
    width="330" height="90">
    </td>
    <td height="172"></td>
    </tr>
    <tr>
    <td width="181"></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td width="181"></td>
    <td></td>
    <td></td>
    </tr>
    </table>
    </body></html>