如何按下左键后在一个图片上画出一个矩形框？

<img id="selectBox" src="box.bmp" style="BORDER: blue 1px solid; DISPLAY: none; Z-INDEX: 500; LEFT: 0px; WIDTH: 0px; POSITION: absolute; TOP: 0px; HEIGHT: 0px;filter:alpha(opacity=50)">
<SCRIPT language="JScript">
document.onmousedown=foo1;
document.onmousemove=foo2;
document.onmouseup=foo3;
var mousedown=false;
var x1,y1,x2,y2;function foo1(){
mousedown=true;
x1 = event.x+document.body.scrollLeft;
y1 = event.y+document.body.scrollTop;
}
function foo2(){
x2 = event.x+document.body.scrollLeft;
y2 = event.y+document.body.scrollTop;
if(mousedown){
selectBox.style.display="";
selectBox.style.width=1;
selectBox.style.height=1;
if(x1<x2&&y1==y2){
selectBox.style.top=y1;
selectBox.style.left=x1;
}
if(x1>x2&&y1==y2){
selectBox.style.top=y1;
selectBox.style.left=x2;
}
if(x1==x2&&y1>y2){
selectBox.style.top=y2;
selectBox.style.left=x1;
}
if(x1==x2&&y1<y2){
selectBox.style.top=y1;
selectBox.style.left=x1;
}
if(x1>x2&&y1>y2){
selectBox.style.top=y2;
selectBox.style.left=x2;
}
if(x1<x2&&y1<y2){
selectBox.style.top=y1;
selectBox.style.left=x1;
}
if(x1<x2&&y1>y2){
selectBox.style.top=y2;
selectBox.style.left=x1;
}
if(x1>x2&&y1<y2){
selectBox.style.top=y1;
selectBox.style.left=x2;
}
selectBox.style.width=Math.abs(x1-x2);
selectBox.style.height=Math.abs(y1-y2);
}
}
function foo3(){
selectBox.style.display="none";
mousedown=false;
}
function avoid(){
event.returnValue=false;
event.cancelBubble=true;
}
document.onselectstart=avoid;给你参考下

解决方案 »

  1.   

    在图片上加上
    ondragstart="return false"
    试试
      

  2.   

    呵呵，我没有说清楚，
    document.onmousedown=foo1;
    document.onmousemove=foo2;
    document.onmouseup=foo3;
    上面事件触发 onmousemove 是在document上执行的。我希望在一个img
    上触发
    如果放在 img.onmousemove=foo2 就不行了。
      

  3.   

    你需要注意到：
    当layer出现在鼠标下面时，这个layer在img的上面。鼠标事件发生在layer上而不是img上
      

  4.   

    <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>