我想用鼠标取图片中的一部分，提交坐标值(x0,y0,x1,y1).用什么方法实现？

form中有一种input type=image可以提交鼠标点击时在该图的坐标值，name.x、name.y。但我想用鼠标在该图上拉一个区，即左上的(x0,y0)及右下的(x1,y1)。怎样才能实现？我想要的不是一个点，而是一块区域的坐标值(x0,y0,x1,y1).

解决方案 »

  1.   

    ?问题是你拿到这个坐标有什么用呢？如果你只是为了让用户可以在图片上画框框，那是另外一回事
    那你就自己做嘛和input type=image有什么关系呢？
      

  2.   

    event.x-img.clientLeft
    event.y-img.clientTop
      

  3.   

    回复wsj(骆驼)：当然有用，由于图象很大，先给一个全局的缩略图，用户想看哪一部分，再放大给他。如果只能得到一点，我只能给他固定大小的一部分图，如果得到一个区，则能给他该区的适当大小的图。
      

  4.   

    <input type="image"……>那你为什么要用这种方法呢？？？
      

  5.   

    写了一个，不是很好使。你慢慢改吧<span width="0" height="0" id=dragdiv style="BORDER-RIGHT: 1px dashed; BORDER-TOP: 1px dashed; LEFT: 285px; BORDER-LEFT: 1px dashed; WIDTH: 5px; BORDER-BOTTOM: 1px dashed; POSITION: absolute; TOP: 198px; HEIGHT: 10px"></span>
    <img id=theimg ondrag=event.returnValue=false; onmouseout="if(event.srcElement!=dragdiv){this.bDrag=false;}" onmouseup="this.bDrag=false;block.value=dragdiv.offsetLeft+','+dragdiv.offsetTop+','+(dragdiv.offsetWidth+3)+','+(dragdiv.offsetHeight+3)" onmousemove=if(this.bDrag){dragdiv.style.width=(event.x-dragdiv.offsetLeft)-3;dragdiv.style.height=(event.y-dragdiv.offsetTop)-3;status=event.x} onselectstart="event.returnValue=false;" onmousedown=this.bDrag=true;dragdiv.style.left=event.x;dragdiv.style.top=event.y; src="http://expert.csdn.net/images/csdn.gif">
    <input id=block></input>
      

  6.   

    <form name=form1>
    <img src=test.gif border=1 onMouseMove="move()">
    <input type=hidden name=x0>
    <input type=hidden name=y0>
    <input type=hidden name=x12>
    <input type=hidden name=y1>
    </form>
    <span id="view"></img>
    <script>
    function move() {
      el = event.srcElement;
      if(event.button) {
        document.form1.x0.value = event.y - el.offsetLeft - 3;
        document.form1.y0.value = event.y - el.offsetTop - 3;
        el.my = true;
      }else if(el.my == true) {
        document.form1.x1.value = event.y - el.offsetLeft - 3;
        document.form1.y1.value = event.y - el.offsetTop - 3;
      }
    }
    </script>
      

  7.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    var selecting=false;
    var x1,x2,y1,y2
    function mDown(){
       selecting=true;
       x1=window.event.x;
       y1=window.event.y;
       selectBG.style.left=x1;
       selectBG.style.top=y1;
       for(i=0;i<document.images.length;i++)document.images[i].style.border=0;
    }
    function mMove(){
       if(!selecting)return false;
       selectBG.style.visibility="visible";
       x2=window.event.x;
       y2=window.event.y;
       if(x2<x1||y2<y1){
           selectBG.style.left=x2;
           selectBG.style.top=y2;
           var w=x1-x2;
           var h=y1-y2;
       }else{ 
           var w=x2-x1;
           var h=y2-y1;
       }
       try{
          selectBD.style.width=w;
          selectBD.style.height=h;
       }
       catch(x){}
    }
    function mUp(){
       if(!selecting){ 
          selecting=false;
      return false
       }else{
           checkSelection(x1,y1,x2,y2);
           selecting=false;
       }
       selectBG.style.visibility="hidden";
       selectBD.style.width=1;
       selectBD.style.height=1;
       //document.selction.ontimeerror();
    }
    var selectedIMG=new Array();
    function checkSelection(x1,y1,x2,y2){//只选中完整的图片
       var imgs=document.images;
       selectedIMG=new Array();
       for(i=0;i<imgs.length;i++){
           var imgx1=getAbsoluteX(imgs[i]);
       var imgy1=getAbsoluteY(imgs[i]);
       var imgx2=imgx1+imgs[i].clientWidth;
       var imgy2=imgy1+imgs[i].clientHeight;
       if((imgx1>=x1&&imgx2<=x2&&imgy1>=y1&&imgy2<=y2)
            ||(imgx1>=x2&&imgx2<=x1&&imgy1>=y2&&imgy2<=y1)){
          selectedIMG[selectedIMG.length]=imgs[i];
              imgs[i].style.border=1;
      imgs[i].style.borderStyle="dashed";
      imgs[i].style.borderColor="red";
       }
       }
       test(selectedIMG)//测试选择，显示选择对象的信息
       //如果你想得到img的集合，定义一个全局变量如 :myimgs=selectedIMG
    }
    function getAbsoluteX(e){//得绝对X
        var end=document.body.sourceIndex;
        var x=e.offsetLeft;
    var sid=e.parentElement.sourceIndex;
    var tmp=e.parentElement;
    while(sid!=end){
        x+=tmp.offsetLeft;
    tmp=tmp.parentElement;
    sid=tmp.sourceIndex;
    }
    return x
    }
    function getAbsoluteY(e){//得绝对Y
        var end=document.body.sourceIndex;
        var y=e.offsetTop;
    var sid=e.parentElement.sourceIndex;
    var tmp=e.parentElement;
    while(sid!=end){
        y+=tmp.offsetTop;
    tmp=tmp.parentElement;
    sid=tmp.sourceIndex;
    }
    return y
    }
    function imgdragstart(){return false;}
    /*------------------------------------------*/
    function test(imgarr){
       var str='你选择的图片ID是下列:';
       for(i=0;i<imgarr.length;i++)str+='<br>id:'.bold()+imgarr[i].id+'|width:'.bold()+imgarr[i].clientWidth+'|height:'.bold()+imgarr[i].clientHeight+'|src:'.bold()+imgarr[i].src;
       document.all.msg.innerHTML=str    
    }
    document.onmousedown = mDown
    document.onmousemove = mMove
    document.onmouseup = mUp;
    //-->
    </SCRIPT>
    </HEAD><BODY>
    <!-- 必须 -->
    <div id=selectBG style="position:absolute;overflow:visible;visibility:hidden;z-index:200;">
    <TABLE id=selectBD style="border-style:dashed;border-color:red;width:1px;height:1px;border-width:1px;">
    <TR><TD></TD></TR>
    </TABLE>
    </div>
    <IMG id=img1 SRC="http://www.csdn.net/images/csdn.gif" WIDTH="150" HEIGHT="70" BORDER=0 ALT="" >
    <IMG  id=img2 SRC="http://www.csdn.net/images/ad/vsnet_120.gif" WIDTH="120" HEIGHT="60" BORDER=0 ALT=""><IMG id=img4  SRC="http://www.csdn.net/images/home/programmer200207small.jpg" WIDTH="100" HEIGHT="142" BORDER=0 ALT="">
    <IMG id=img5  SRC="http://www.csdn.net/images/index_login2.gif" WIDTH="60" HEIGHT="20" BORDER=0 ALT="">
    <IMG id=img6  SRC="http://www.csdn.net/images/biaoshi.gif" WIDTH="62" HEIGHT="62" BORDER=0 ALT="">
    <div style="position:absolute;overflow:visible;z-index:1;left:250px;top:300px;width:200px;height:200px;background-color:blue;">
        <IMG id=img3  SRC="http://www.csdn.net/images/csdn.gif" WIDTH="150" HEIGHT="70" BORDER=0 ALT="">
    </div>
    <br>
    <span id=msg style="font-size:13px;"></span><SCRIPT LANGUAGE="JavaScript">
    <!--
    for(i in document.images)document.images[i].ondragstart=imgdragstart;//必须，屏蔽image的拖动//-->
    </SCRIPT>
    </BODY>
    </HTML>
      

  8.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    var selecting=false;
    var x1,x2,y1,y2
    function mDown(){
       selecting=true;
       x1=window.event.x;
       y1=window.event.y;
       selectBG.style.left=x1;
       selectBG.style.top=y1;
       for(i=0;i<document.images.length;i++)document.images[i].style.border=0;
    }
    function mMove(){
       if(!selecting)return false;
       selectBG.style.visibility="visible";
       x2=window.event.x;
       y2=window.event.y;
       if(x2<x1||y2<y1){
           selectBG.style.left=x2;
           selectBG.style.top=y2;
           var w=x1-x2;
           var h=y1-y2;
       }else{ 
           var w=x2-x1;
           var h=y2-y1;
       }
       try{
          selectBD.style.width=w;
          selectBD.style.height=h;
       }
       catch(x){}
    }
    function mUp(){
       if(!selecting){ 
          selecting=false;
      return false
       }else{
           checkSelection(x1,y1,x2,y2);
           selecting=false;
       }
       selectBG.style.visibility="hidden";
       selectBD.style.width=1;
       selectBD.style.height=1;
       //document.selction.ontimeerror();
    }
    var selectedIMG=new Array();
    function checkSelection(x1,y1,x2,y2){//只选中完整的图片
       var imgs=document.images;
       selectedIMG=new Array();
       for(i=0;i<imgs.length;i++){
           var imgx1=getAbsoluteX(imgs[i]);
       var imgy1=getAbsoluteY(imgs[i]);
       var imgx2=imgx1+imgs[i].clientWidth;
       var imgy2=imgy1+imgs[i].clientHeight;
       if((imgx1>=x1&&imgx2<=x2&&imgy1>=y1&&imgy2<=y2)
            ||(imgx1>=x2&&imgx2<=x1&&imgy1>=y2&&imgy2<=y1)){
          selectedIMG[selectedIMG.length]=imgs[i];
              imgs[i].style.border=1;
      imgs[i].style.borderStyle="dashed";
      imgs[i].style.borderColor="red";
       }
       }
       test(selectedIMG)//测试选择，显示选择对象的信息
       //如果你想得到img的集合，定义一个全局变量如 :myimgs=selectedIMG
    }
    function getAbsoluteX(e){//得绝对X
        var end=document.body.sourceIndex;
        var x=e.offsetLeft;
    var sid=e.parentElement.sourceIndex;
    var tmp=e.parentElement;
    while(sid!=end){
        x+=tmp.offsetLeft;
    tmp=tmp.parentElement;
    sid=tmp.sourceIndex;
    }
    return x
    }
    function getAbsoluteY(e){//得绝对Y
        var end=document.body.sourceIndex;
        var y=e.offsetTop;
    var sid=e.parentElement.sourceIndex;
    var tmp=e.parentElement;
    while(sid!=end){
        y+=tmp.offsetTop;
    tmp=tmp.parentElement;
    sid=tmp.sourceIndex;
    }
    return y
    }
    function imgdragstart(){return false;}
    /*------------------------------------------*/
    function test(imgarr){
       var str='你选择的图片ID是下列:';
       for(i=0;i<imgarr.length;i++)str+='<br>id:'.bold()+imgarr[i].id+'|width:'.bold()+imgarr[i].clientWidth+'|height:'.bold()+imgarr[i].clientHeight+'|src:'.bold()+imgarr[i].src;
       document.all.msg.innerHTML=str    
    }
    document.onmousedown = mDown
    document.onmousemove = mMove
    document.onmouseup = mUp;
    //-->
    </SCRIPT>
    </HEAD><BODY>
    <!-- 必须 -->
    <div id=selectBG style="position:absolute;overflow:visible;visibility:hidden;z-index:200;">
    <TABLE id=selectBD style="border-style:dashed;border-color:red;width:1px;height:1px;border-width:1px;">
    <TR><TD></TD></TR>
    </TABLE>
    </div>
    <IMG id=img1 SRC="http://www.csdn.net/images/csdn.gif" WIDTH="150" HEIGHT="70" BORDER=0 ALT="" >
    <IMG  id=img2 SRC="http://www.csdn.net/images/ad/vsnet_120.gif" WIDTH="120" HEIGHT="60" BORDER=0 ALT=""><IMG id=img4  SRC="http://www.csdn.net/images/home/programmer200207small.jpg" WIDTH="100" HEIGHT="142" BORDER=0 ALT="">
    <IMG id=img5  SRC="http://www.csdn.net/images/index_login2.gif" WIDTH="60" HEIGHT="20" BORDER=0 ALT="">
    <IMG id=img6  SRC="http://www.csdn.net/images/biaoshi.gif" WIDTH="62" HEIGHT="62" BORDER=0 ALT="">
    <div style="position:absolute;overflow:visible;z-index:1;left:250px;top:300px;width:200px;height:200px;background-color:blue;">
        <IMG id=img3  SRC="http://www.csdn.net/images/csdn.gif" WIDTH="150" HEIGHT="70" BORDER=0 ALT="">
    </div>
    <br>
    <span id=msg style="font-size:13px;"></span><SCRIPT LANGUAGE="JavaScript">
    <!--
    for(i in document.images)document.images[i].ondragstart=imgdragstart;//必须，屏蔽image的拖动//-->
    </SCRIPT>
    </BODY>
    </HTML>
    需要修改一下，自己看着办吧
      

  9.   

    wsj:你的程序鼠标改变，坐标值没变化!
    xuzuning(唠叨) ：你的坐标是相对屏幕的值，找不到0，0点；
    llrock(百乐宝||昨夜星辰) ：你的程序很漂亮，但我不知道坐标值在哪里能看到!？大家的回答我非常感谢，请继续!!
    我的JS很臭!看不太懂，只是照搬看结果。还没仔细研究。我在北京，方便的话请以上三位多多指教。不仅给分，还可以请饭!!!!
    再帮帮忙!继续!!
      

  10.   

    修改了一些错误，很久以前写的，呵呵，我的js很差，不好意思呀
    =======================================
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    var selecting=false;
    var sx,ex,sy,ey
    var imgs=new Object();function mDown(){
       selecting=true;
       sx=window.event.x;
       sy=window.event.y;
       for(i=0;i<imgs.length;i++)imgs[i].style.border=0;
    }
    function mMove(){
       if(!selecting)return false;
       precinct[0].style.visibility="visible";
       ex=window.event.x;
       ey=window.event.y;
       with(precinct[0].style)
       {
          left=Math.min(sx,ex);
          top=Math.min(sy,ey);
       }
       with(precinct[1].style)
       {
          width=Math.abs(sx-ex);
      height=Math.abs(sy-ey);
       }
    }function mUp(){
       if(!selecting){ 
          selecting=false;
      return false
       }else{
           checkSelection(sx,sy,ex,ey);
           selecting=false;
       }
       precinct[0].style.visibility="hidden";
       precinct[1].style.width=1;
       precinct[1].style.height=1;
    }//检查图片是否被选中
    function checkSelection(sx,sy,ex,ey)
    {
       var imgsx,imgxy;  //图片左上脚坐标
       var imgex,imgey;  //图片右下角坐标
       var str="你选择的图片ID是下列:<BR>"; //显示信息
       for(i=0;i<imgs.length;i++){
           imgsx=getAbsoluteX(imgs[i]);
       imgsy=getAbsoluteY(imgs[i]);
       imgex=imgsx+imgs[i].clientWidth;
       imgey=imgsy+imgs[i].clientHeight;
       //只有当图片完全在选框内才认为被选中，修改判断条件来选取
       if( imgsx>=Math.min(sx,ex)
           &&imgsy>=Math.min(sy,ey)
       &&imgex<=Math.max(sx,ex)
       &&imgey<=Math.max(sy,ey))
       {
          
              imgs[i].style.border=1;
      imgs[i].style.borderStyle="dashed";
      imgs[i].style.borderColor="red";
      
              str+="<br> startX:".bold()+imgsx+" | startY:".bold()+imgsy+" |endX:".bold()+imgex+" |endY:".bold()+imgey+'|width:'.bold()+imgs[i].clientWidth
                  +'|height:'.bold()+imgs[i].clientHeight+'|src:'.bold()+imgs[i].src;
       }
       }
       document.all.msg.innerHTML=str
    }function getAbsoluteX(e){//得绝对X，相对于document
        var end=document.body.sourceIndex;
        var x=e.offsetLeft;
    var sid=e.parentElement.sourceIndex;
    var tmp=e.parentElement;
    while(sid!=end){
        x+=tmp.offsetLeft;
    tmp=tmp.parentElement;
    sid=tmp.sourceIndex;
    }
    return x
    }
    function getAbsoluteY(e){//得绝对Y
        var end=document.body.sourceIndex;
        var y=e.offsetTop;
    var sid=e.parentElement.sourceIndex;
    var tmp=e.parentElement;
    while(sid!=end){
        y+=tmp.offsetTop;
    tmp=tmp.parentElement;
    sid=tmp.sourceIndex;
    }
    return y
    }document.onmousedown = mDown
    document.onmousemove = mMove
    document.onmouseup = mUp;
    //-->
    </SCRIPT>
    </HEAD><BODY>
    <!-- 必须 --><div id=precinct style="position:absolute;overflow:visible;visibility:hidden;z-index:200;font-size:1px;">
    <TABLE id=precinct style="border-style:dashed;border-color:red;width:1px;height:1px;border-width:1px;font-size:1px;">
    <TR><TD></TD></TR>
    </TABLE>
    </div><!--  -->
    <IMG  SRC="http://www.csdn.net/images/csdn.gif" WIDTH="150" HEIGHT="70" BORDER=0 ALT="" >
    <IMG   SRC="http://www.csdn.net/images/ad/vsnet_120.gif" WIDTH="120" HEIGHT="60" BORDER=0 ALT=""><IMG   SRC="http://www.csdn.net/images/home/programmer200207small.jpg" WIDTH="100" HEIGHT="142" BORDER=0 ALT="">
    <IMG   SRC="http://www.csdn.net/images/index_login2.gif" WIDTH="60" HEIGHT="20" BORDER=0 ALT="">
    <IMG   SRC="http://www.csdn.net/images/biaoshi.gif" WIDTH="62" HEIGHT="62" BORDER=0 ALT="">
    <div style="position:absolute;overflow:visible;z-index:1;left:250px;top:300px;width:200px;height:200px;background-color:blue;">
        <IMG   SRC="http://www.csdn.net/images/csdn.gif" WIDTH="150" HEIGHT="70" BORDER=0 ALT="">
    </div>
    <br>
    <span id=msg style="font-size:13px;"></span><SCRIPT LANGUAGE="JavaScript">
    <!--
    imgs=document.images;
    for(i in imgs)
       imgs[i].ondragstart=new Function("return false");//必须，屏蔽image的拖动
    //-->
    </SCRIPT>
    </BODY>
    </HTML>
      

  11.   

    llrock(百乐宝||昨夜星辰) ：
    我把您的程序按我的需求做了以下调整：
    可鼠标UP不管用为什么？
    解决了马上散分!!!<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>
    <head>
    <title>Untitled</title>
    </head>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    var selecting=false;
    var x1,x2,y1,y2
    function mDown(){
       selecting=true;
       x1=window.event.x;
       y1=window.event.y;
       selectBG.style.left=x1;
       selectBG.style.top=y1;
    }
    function mMove(){
       if(!selecting)return false;
       selectBG.style.visibility="visible";
       x2=window.event.x;
       y2=window.event.y;  
       if(x2<x1){
           selectBG.style.left=x2;
           var w=x1-x2;
      }else{ 
           var w=x2-x1;
       }
       if(y2<y1){
           selectBG.style.top=y2;
           var h=y1-y2;
       }else{ 
           var h=y2-y1;
       }
       try{
          selectBD.style.width=w;
          selectBD.style.height=h;
       }
       catch(x){}
    }
    function mUp(){
       if(!selecting){ 
          selecting=false;
      return false;
       }else{
           window.alert(x1+','+y1+','+x2+','+y2);<!--- checkSelection --->
           selecting=false;
       }
       selectBG.style.visibility="hidden";
       selectBD.style.width=1;
       selectBD.style.height=1;
       //document.selction.ontimeerror();
    }
    function imgdragstart(){return false;}
    //-->
    </SCRIPT><!--- document.onmousedown = mDown
    document.onmousemove = mMove
    document.onmouseup = mUp; --->
    <!--- document.onmousedown = mDown
    document.onmousemove = mMove
    document.onmouseup = mUp; --->
    <body>
    <div id=selectBG style="position:absolute;overflow:visible; visibility:hidden;z-index:200;">
    <TABLE id=selectBD style="border-style:dashed;border-color:red;width:1px;height:1px;border-width:1px;">
    <TR><TD></TD></TR>
    </TABLE>
    </div>
    <img src="../batman.jpg"
         alt=""
         border="0"
         onMouseDown="mDown();"
         onMouseUp="mUp();"
         onMouseMove="mMove();"><SCRIPT LANGUAGE="JavaScript">
    <!--
    for(i in document.images)document.images[i].ondragstart=imgdragstart;//必须，屏蔽image的拖动//-->
    </SCRIPT>
    </body>
    </html>
      

  12.   

    <img src="../batman.jpg"
         alt=""
         border="0"
         onMouseDown="mDown();"
         onMouseUp="mUp();"
         onMouseMove="mMove();">
    onmouseup,好像的小写。
    而且那个选框是在body中的，而且它的坐标系是body的坐标系，你把所有的鼠标事件付给image对象，此时会使用image的坐标系，所以悬框不会正常使用。使用我第二次给你的那个，第一个有很多错误