鼠标在图片上选择一个框,这个框的起点与终点的坐标?

大家一起顶一下,我看查了整个csdn了这个问题 好像好久了都没有解决,请高手指点啊...

解决方案 »

  1.   

    怎么不用document.addEventListener做?
    這段代碼寫的太復雜﹐懶得看。
    用二級DOM
    document.addEventListener("mousedown",downfunction,true);
    ....
    很簡單的。
      

  2.   

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=big5">
    <title>無標題文件</title>
    <script language="JavaScript">
    var fx;
    var fy;
    var lx;
    var ly;
    function beginm(el,event)
    {
      fx=event.clientX;
      fy=event.clientY;
      document.all["a"].value=fx+":"+fy;  //框左上坐標顯示在text中
      
     document.attachEvent("onmousemove",moveh);
     document.attachEvent("onmouseup",uph);
     event.cancelBubble=true;
     event.returnValue=false;
     
     function moveh()
     {
       lx=event.clientX;
       ly=event.clientY;
       event.cancelBubble=true;
       event.returnValue=false;
     }
     function uph()
     {
      lx=event.clientX;             //如果需要相對坐標﹐自己去減圖片的left top坐標﹐我不用寫了。
       ly=event.clientY;
       event.cancelBubble=true;
       event.returnValue=false;
       document.all["b"].value=lx+":"+ly;   //框右下角坐標顯示在text中
       document.detachEvent("onmouseup",uph);
    document.detachEvent("onmousemove",moveh);
     }
     
    }
    </script>
    </head><body>
    <div id="Layer1" style="position:absolute; left:86px; top:52px; width:88px; height:51px; z-index:1"><img src="b4.gif" width="90" height="90" onMouseDown="beginm(this,event)"></div>
    <input type="text" id="a">
    <input type="text" id="b">
    </body>
    </html>
      

  3.   

    減掉圖片的 top,left就是相對圖片坐標了﹐你可以畫一畫坐標圖就清楚了。
      

  4.   

    计算没有问题，关键是onmouseup的问题，因为当前鼠标落在dd这个div的border上，所以事件并没有成功的触发到MyImage上
    建议onmousedown的时候
    document.images.MyImage.setCapture();
    相应的，up的时候releaseCapture掉