如何选取图像的一块区域，并获取其起始和终点坐标值？

对了，还有一条要求，代码需要在IE浏览器和Mozilla（或firfox)浏览器中通用。再一次恳请高手指点，多谢了。

解决方案 »

  1.   

    对了，还有一条要求，代码需要在IE浏览器和Mozilla（或firefox)浏览器中通用。再一次恳请高手指点，多谢了。
      

  2.   

    这个功能，用Javascript应该比较好实现的，只是苦于时间和精力的原因，才不得不求助于此了。
      

  3.   

    hsf1024，请给点提示吧，我以前没接触过Javascript，对你很容易的事情，对我来说就很难。
      

  4.   

    用onmousedown事件是可以知道鼠标的位置的，写得比较少，你给meizz发短消息吧，如果我写的话比较耗费经历，他应该有现成的作品的，猜测ing
      

  5.   

    谢谢liuxiaoyi666(兔子)。
    昨天，我参考别人的代码写了以下代码：
    <HTML>
    <HEAD>
    <TITLE> Draw a selection box and get the coordinates.</TITLE><SCRIPT LANGUAGE="JavaScript">
    <!--var startX = 0;
    var startY = 0;
    var endX = 0;
    var endY = 0;
    var bDown = false;function onMouseDown() {
    bDown = true;
    startX = event.x;
    startY = event.y;
    rect.style.display = "";
    rect.style.border = "1px solid #0000FF";
    rect.style.top = startY;
    rect.style.left = startX;
    rect.style.width = "0px"
    rect.style.height = "0px" // show the coordinates
    showCoord();
    }function onMouseMove() {
    if (bDown) {
    endX = event.x;
    endY = event.y;
    rect.style.width = Math.abs(endX -startX) + "px";
    rect.style.height = Math.abs(endY -startY) + "px";
    if(endX<startX) rect.style.left = startX - Math.abs(endX -startX);
    if(endY<startY) rect.style.top = startY - Math.abs(endY -startY);
    window.status = "Width:" + Math.abs(endX -startX) + "  Height:" + Math.abs(endY -startY); // show the coordinates
    showCoord();
    }
    }function onMouseUp() {
    bDown = false;
    rect.style.display = "none"; // show the coordinates
    showCoord();
    }function showCoord() {
    var offsetX = window.event.clientX;
    var offsetY = window.event.clientY;
    showxy.style.display = "";
    showxy.style.left = offsetX + document.body.scrollLeft;
    showxy.style.top = offsetY + document.body.scrollTop;
    showxy.innerText=event.offsetX.toString()+","+event.offsetY.toString();
    }function hideDiv() {
    rect.style.display = "none";
    showxy.style.display = "none";
    }//-->
    </SCRIPT>
    </HEAD><BODY>
    <DIV id="showxy" style="POSITION:absolute;color:red">
    </DIV>
    <DIV id="rect" style="position:absolute;display:none;">
    </DIV>
    <IMG src="H:/test.jpg" 
     style="cursor: crosshair"
     width="1024" height="768" 
     onMouseDown="onMouseDown()"
     onMouseMove="onMouseMove()"
     onMouseUp="onMouseUp"   
     onMouseOut="hideDiv()" >
    </BODY>
    </HTML>但是存在几个问题：
    1、拖动图片时，会出现禁止符号；
    2、矩形选择框的显示会出现逻辑混乱现象；
    3、当用MyIE浏览器打开时，只要按下鼠标开始拖动，就会弹出一个新的窗口，将整幅图像显示出来；
    4、在Mozilla（或firefox）中无法工作。请高手指点，谢谢。
      

  6.   

    <HTML>
    <HEAD>
    <TITLE> Draw a selection box and get the coordinates.</TITLE><SCRIPT LANGUAGE="JavaScript">
    <!--var startX = 0;
    var startY = 0;
    var endX = 0;
    var endY = 0;
    var bDown = false;function onMouseDown() {
    bDown = true;
    startX = event.x;
    startY = event.y;
    rect.style.display = "";
    rect.style.border = "1px solid #0000FF";
    rect.style.top = startY;
    rect.style.left = startX;
    rect.style.width = "0px"
    rect.style.height = "0px"// show the coordinates
    showCoord();
    }function onMouseMove() {
    if (bDown) {
    endX = event.x;
    endY = event.y;
    rect.style.width = Math.abs(endX -startX) + "px";
    rect.style.height = Math.abs(endY -startY) + "px";
    rect.style.left = Math.min(endX,startX-1);
    rect.style.top = Math.min(endY,startY-1);window.status = "Width:" + Math.abs(endX -startX) + " Height:" + Math.abs(endY -startY);// show the coordinates
    showCoord();
    }
    }function onMouseUp() {
    bDown = false;
    rect.style.display = "none";// show the coordinates
    showCoord();
    }function showCoord() {
    var offsetX = window.event.clientX;
    var offsetY = window.event.clientY;
    showxy.style.display = "";
    showxy.style.left = offsetX + document.body.scrollLeft;
    showxy.style.top = offsetY + document.body.scrollTop;
    showxy.innerText=event.offsetX.toString()+","+event.offsetY.toString();
    }function hideDiv() {
    rect.style.display = "none";
    showxy.style.display = "none";
    }//-->
    </SCRIPT>
    </HEAD><BODY>
    <DIV id="showxy" style="POSITION:absolute;color:red">
    </DIV>
    <DIV id="rect" style="position:absolute;display:none;
    overflow-y:hidden;
    overflow-x:hidden;">
    </DIV>
    <IMG src="background/深夜星空1024.jpg"
    style="cursor: crosshair"
    width="1024" height="768"
    onMouseDown="onMouseDown();this.setCapture();"
    onMouseMove="onMouseMove()"
    onMouseUp="onMouseUp();hideDiv();this.releaseCapture();">
    </BODY>
    </HTML>
      

  7.   

    希望overcast能弄出一个firefox也能用的版本来
    如果实在不行，这50分也非你莫属了。过两天我会给分的。
      

  8.   

    似乎是firefox不支持层的绝对定位
    搞不定
    javascript不是很熟悉
      

  9.   

    已经很不错了。我也查了一下，好像firefox对javascript支持不是很好。
    哎，说是javascript跨平台，我觉得也不过如此。基本上是每个浏览器都用自己的一套，只不过写法上相似罢了。