鼠标在图片上选择四边框javascript怎么取出两点在图片上的标值

<html>
<head>
<title> 鼠標取框 </title>
<script language="JavaScript">
var x0;
var y0;
var select=false;function Conmousedown()
{
    x0=document.body.scrollLeft+event.clientX;// 鼠?起始横坐?
    y0=document.body.scrollTop+event.clientY;// 鼠?起始?坐?
    select=true;
}function document.onmouseup()
{
//document.all.img1.click();
    select=false;
}function document.onselectstart()
{
    return false;
}function document.ondrag()
{
    return false;
}function Conmousemove()
{
   if (select)
    {
        dd.style.display='';// 如果鼠?已?正?移?，将??置?可?。
        if(document.body.scrollLeft+event.clientX-x0>0) // 从左向右
        {
            dd.style.left=x0;
            dd.style.width=document.body.scrollLeft+event.clientX-x0-2;
        }
        else // 从右向左
        {
            dd.style.left=document.body.scrollLeft+event.clientX;
            dd.style.width=x0-(document.body.scrollLeft+event.clientX);
        }
        if (document.body.scrollTop+event.clientY-y0>0)// 从上向下
        {
            dd.style.top=y0;
            dd.style.height=document.body.scrollTop+event.clientY-y0;
        }
        else// 从下向上
        {
            dd.style.top=document.body.scrollTop+event.clientY;
            dd.style.height=y0-(document.body.scrollTop+event.clientY);
        }
    }
}
</script>
</head>
<body>
<form name="form1">
<table>
<tr>
<td onMouseMove="javascript:Conmousemove()" onMouseDown="JavaScript:Conmousedown();">
<input type="image" name="img1" id="img1" src="16373417.bmp" onclick="return false;">
</td>
</tr>
</table>
<table id="dd" style="position:absolute; width:0px; height:0px; z-index:99; border:1px RED Solid; display:none;">
<tr>
<td></td>
</tr>
</table>
</form>
</body>
</html>

解决方案 »

  1.   

    onclick="return false;" 去掉
      

  2.   

    <HTML>
    <HEAD>
    <script language="JavaScript">
    var x0;
    var y0;
    var select=false;function Conmousedown()
    {
        x0=document.body.scrollLeft+event.clientX;// 鼠?起始横坐?
        y0=document.body.scrollTop+event.clientY;// 鼠?起始?坐?
        select=true;
    }function document.onmouseup()
    {
        select=false;
    myImgDim = getDim(document.images.MyImage);
    alert(" startPos: " + "X = " + eval(x0-myImgDim.x) + " , " + " Y= " + eval(y0-myImgDim.x) + "\n"
    + " EndPos: " + "X = " + eval(event.clientX-myImgDim.x) + " , " + " Y= " + eval(event.clientY-myImgDim.y) + "\n"
    );
    }function document.onselectstart()
    {
        return false;
    }function document.ondrag()
    {
        return false;
    }function Conmousemove()
    {
       if (select){
            dd.style.display='';// 如果鼠?已?正?移?，将??置?可?。   
    myImgDim = getDim(document.images.MyImage);
    //alert("x:" + eval(event.clientX - myImgDim.x) + ", y:" + eval(event.clientY - myImgDim.y))
    if(document.body.scrollLeft+event.clientX-x0>0) // 从左向右
            {
                dd.style.left=x0;
                dd.style.width=document.body.scrollLeft+event.clientX-x0-2;
            }
            else // 从右向左
            {
                dd.style.left=document.body.scrollLeft+event.clientX;
                dd.style.width=x0-(document.body.scrollLeft+event.clientX);
            }
            if (document.body.scrollTop+event.clientY-y0>0)// 从上向下
            {
                dd.style.top=y0;
                dd.style.height=document.body.scrollTop+event.clientY-y0;
            }
            else// 从下向上
            {
                dd.style.top=document.body.scrollTop+event.clientY;
                dd.style.height=y0-(document.body.scrollTop+event.clientY);
            }
        }
    }function getDim(el){
    for (var lx=0,ly=0;el!=null;
    lx+=el.offsetLeft,ly+=el.offsetTop,el=el.offsetParent);
    return {x:lx,y:ly}
    }</script>
    </HEAD>
    <BODY>
    <table style="left: 500px;border:1px BLACK Solid;">
    <tr>
    <td onMouseMove="Conmousemove()" onMouseDown="Conmousedown();">
    <img id="MyImage" src="G:\DeskTop ShortCut\16373417.bmp">
    </td>
    </tr>
    </table>
    <table id="dd" style="position:absolute;width:0px;height:0px;z-index:99;border:1px RED Solid;display:none;">
    <tr><td></td></tr>
    </table>
    </BODY>
    </HTML>你鼠标点击的时候，先不要放，画好方框后再释放。程序写得比较差，反应有点问题，不过是可以实现的。现在稍微修正了一下。你看到开始于结束坐标一样，是因为释放得太快了。或者你鼠标放到画的方框里面去了。