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

<img src="D:\\file\\2007518143110.jpg" onmouseup="showCoordinate(this);" onmousedown="showCoordinate(this);" width="330" height="90">
我觉得你这个写的就没有问题了，调用一下onmouseup和onmousedown这两个事件就可以得到第一次按下的值和你托到鼠标以后的值，两个相减就得到了你托动的宽和高。
你试下吧

解决方案 »

  1.   

    <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>  
      拉伸长: <input  type="text"  id="M"  readonly>  
      拉伸宽: <input  type="text"  id="N"  readonly>
      <script  language="javascript">
      var x0, y0, flag=false;
      function  getCoordinate(obj){  
      var  r  =  getAbsolutePos(obj);  
      var  x  =  document.getElementById("X");  
      var  y  =  document.getElementById("Y");  
        
      x0  =  event.clientX  -r.x-3;  
      y0  =  event.clientY  -r.y-3;
      x.value  =  x0;  
      y.value  =  y0;
      flag =true;  
      }  function  showCoordinate(obj){ 
      if (flag) { 
      var  r  =  getAbsolutePos(obj);  
      var  x  =  document.getElementById("X");  
      var  y  =  document.getElementById("Y");  
      var  m  =  document.getElementById("M");  
      var  n  =  document.getElementById("N"); 

      x.value  =  event.clientX  -r.x-3;  
      y.value  =  event.clientY  -r.y-3;
      m.value  =  event.clientX  -r.x-3-x0;  
      n.value  =  event.clientY  -r.y-3-y0;
      }  
      }  
        
      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;  
      }  
      function  setCoordinate(){
      flag=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">  
      <div onmousedown="getCoordinate(this);" onmousemove="showCoordinate(this);" onmouseup="setCoordinate();" style=" width:330px; height:90px; background-color:#EEEEEE"> </div></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>