求代码,对于熟悉JavaScript的高手们应该很简单了...

这么简单就搞定了呀?
不对吧...
比如这个页面只有一行:
<img src="hehe.jpg">
加上您的代码后,form的接收页面里面怎么写才能接受X1,X2,Y1,Y2的值呢?
还有...这个是取出相对图片的相对坐标么...?

是错的,正确的是event.offsetX,event.offsetY
把这些值放在<input type=hidden name="ex1">...再提交

fason(阿信) 没错啊思路是这样的. 可图片是个问题
<%@ Language=VBScript %>
<HTML>
<HEAD>
<meta name="GENERATOR" Content="Microsoft Visual Studio.NET 7.0">
<script language="javascript">
var X1,Y1,X2,Y2,X,Y
function Down(){
X1 = event.clientX;
Y1 = event.clientY;
}
function Up(){
X2 = event.clientX;
Y2 = event.clientY;

document.all("X").value = X2-X1;
document.all("Y").value = Y2-Y1;

X = X2 - X1;
Y = Y2 - Y1;
document.write(X + "/" + Y);

//document.A1.submit();
}
</script>
</HEAD>
<body>
<form action="" id="A1">
<div id=I1 onMouseDown="Down()" onMouseUp="Up();">
<IMG alt="" src="showfileA.jpg" >
</div>
<input type="hidden" id="X"><input type="hidden" id="Y">
</form>
</body>
</HTML>

能不能麻烦高手们给出完整的代码...
我来不及看JavaScript了,以后一定好好看
这个东西时间比较紧...
最好是把form提交目的页面代码也给出来...
=((

多谢botree了.
您说的图片是个问题,什么意思呢?

在图片上取不到坐标....郁闷ing....

我不是说了吗?event.offsetX,event.offsetY就是相对于图片左上角的坐标

try:
<body>
<img id=img1 src="csdn.gif" width=150 height=150 onmousedown="dw()" onmousemove="go()" onmouseup="up()">
<div style="position:absolute;visibility:hidden;width:0;height:0;border:1 solid red;z-index:100" id=tem>
</div>
<form action='1.asp' method=post name=frm>
<input name=x1><input name=y1>
<input name=x2><input name=y2>
</form>
<script>
var a=false
function dw(){
event.srcElement.setCapture();
tem.style.left=event.clientX+document.body.scrollLeft;
tem.style.top=event.clientY+document.body.scrollTop;
frm.x1.value=event.offsetX
frm.y1.value=event.offsetY
tem.style.visibility=''
a=true
}
function go(){
if(a){
tem.style.pixelWidth=event.offsetX-parseInt(frm.x1.value)
tem.style.pixelHeight=event.offsetY-parseInt(frm.y1.value)
}
}function up(){
event.srcElement.releaseCapture();
a=false
frm.x2.value=event.offsetX
frm.y2.value=event.offsetY
document.frm.submit()
}
</script>
</body>

搞定!
发觉自己快成骗浏览器的骗子了... :P<%@ Language=VBScript %>
<HTML>
<HEAD>
<meta name="GENERATOR" Content="Microsoft Visual Studio.NET 7.0">
<script language="javascript">
var X1,Y1,X2,Y2,X,Y
function Down(){
X1 = event.clientX;
Y1 = event.clientY;
}
function Up(){
X2 = event.clientX;
Y2 = event.clientY;

document.all("X").value = X2-X1;
document.all("Y").value = Y2-Y1;

X = X2 - X1;
Y = Y2 - Y1;
//document.write(X + "/" + Y);

document.A1.submit();
}
</script>
</HEAD>
<body>
<form action="" id="A1">
<div id=I1 onMouseDown="Down()" onMouseUp="Up();" style="position: absolute; height:300;width :400; z-index: 1">
<table width=100% height=100%><tr><td background="showfileA.jpg"> </td></tr></table>
</div>
<input type="hidden" id="X"><input type="hidden" id="Y">
</form>
</body>
</HTML>

botree(爱似菩提) ,你写的是错的clientX,clientY是相对于窗口可视内容区域的坐标,不是相对于图片的,是event.offsetX,event.offsetY

放在 http://pqcom.vicp.net/ASPPage1.htm
你可以看看.

Sunmast (呵呵) 是要鼠标拖动点下坐标和放开坐标两个点的相对值.
不过你确实是高手.

coooooooooool!
多谢了!
搞定了^_^
这就结贴,嗯

botree(爱似菩提)兄误解我的意思啦
fason(阿信)就看懂我的意思了,嗯,还照我的要求给出了完整的代码,太棒了!
YEAH!

fason(阿信)的代码我调试出来了
有个小小的问题....
就是鼠标拖放速度太快的时候,红色矩形框会突然跟不上鼠标...
怎么回事呀?稍等就结贴哈

setCapture() 和 releaseCapture() 无必要而且是危险的
倒是应该让<img ondragstart ="return false"/>
A:
在Down时attachEvent(omousemove,go())
在fnUP时deathEvent(omousemove,go())
可以防止没事在图片上移动时也执行go()；
B:
或者是down时启动计时器执行go()，在up时终止计时器；
+:
1,在脚本中加上保护if(A1&&A1.X1...)
2,将<div id="tem" .../>换成<img id="tem" style="position:absolute;" src="透明图片" border="1">
<SCRIPT>
function down(){
  doEvent..
  attachEvent(omousemove,go())
}
function up(){
  doEvent..
  deathEvent(omousemove,go())
}
function go(){   doEvent..
}
</SCRIPT>

exwind(亦然),您能给出完整代码吗?
虽说fason(阿信)的代码已经差不多了
不过我还想更完善一下
我把"attachEvent(omousemove,go())"和"deathEvent(omousemove,go())"分别加到dw和up函数的末尾执行,这样就要提示Script错误
怎么弄呢?
还有:将<div id="tem" .../>换成<img id="tem" style="position:absolute;" src="透明图片" border="1">,为什么要这样换呢?

<body>
<img id=img1 src="csdn.gif" width=150 height=150 onmousedown="dw()" onmouseup="up()" ondragstart="return false">
<div style="position:absolute;left:-1;top:-1;width:1;height:1;border:1 solid red;z-index:100" id=tem>
</div>
<form action='1.asp' method=post name=frm>
<input name=x1><input name=y1>
<input name=x2><input name=y2>
</form>
<script>
//var i=0;
var posX1=0,posX2=0,posY1=0,posY2=0;
var temX,temY;
function dw(){
posX1=event.offsetX;
posY1=event.offsetY;
temX=event.clientX+document.body.scrollLeft;
temY=event.clientY+document.body.scrollTop;
window.document.attachEvent( "onmousemove",go);}
function go(){
tem.style.left=Math.min(temX,event.clientX);
tem.style.top=Math.min(temY,event.clientY);
tem.style.pixelWidth=Math.abs(temX-event.clientX)
tem.style.pixelHeight=Math.abs(temY-event.clientY)
// status+=i;//状态栏看鼠标移动的函数执行频率
}function up(){
posX2=event.offsetX;
posY2=event.offsetY;
frm.x1.value=Math.min(posX1,posX2);
frm.y1.value=Math.min(posY1,posY2);
frm.x2.value=Math.max(posX1,posX2);
frm.y2.value=Math.max(posY1,posY2);
window.document.detachEvent( "onmousemove" ,go);
// document.frm.submit();
}
</script>
</body>

可以任意拖，并且不会执行起来“很慢”，因为原来的event.srcElement可能会是DIV#tem忘了一点，在go()中加上鼠标在img1的范围内有效，马虎马虎^^"

微调：//你查查方向小键盘的keyCode,我假设为u,d,l,r;
[js]
var step=1;//微调大小
function document.onkeyup(){
if(event.keyCode==l) {//LEFT
frm.x1.value-=step;
tem.style.pixelLeft-=step;
}else if(event.keyCode==r){//RIGHT
frm.x1.value+=step;
tem.style.pixelLeft+=step;
}else if(event.keyCode==u){//UP
y1....
tem.style.pixelTop...
}else if(event.keyCode==d){//DOWN
....
}if(event.keyCode==l && event.ctrlKey){//CTRL+LEFT
if(frm.x2.value>=(frm.x1.value+step)){
tem.style.pixelLeft-=step;
frm.x2.value-=step
}
} else if()...
}
[/js]

多谢exwind(亦然)的指点
但是还存在一个问题,除了判断鼠标是否在图片内部以外
如果图片很大超过了一个屏幕,那么一旦滚屏那拖放窗口定位就要出错
好像是这句有问题
tem.style.left=Math.min(temX,event.clientX);
tem.style.top=Math.min(temY,event.clientY);
应该怎么改?

插一句，
setCapture() 和 releaseCapture()是什么作用？
谢谢

setCapture() 捕捉。。比如
[html]
<img1/>
[script]img1.setCapture()]
则屏幕事件由img1获得，直到img1.releaseCapture()。你可以在页面中这样<input type=button value="wokao!" onclick="this.setCapture()"/>
<input type=button value="wokaokaokao!"/>有鼠标点了按钮在点点其他冬冬看看
然后用alt + tab || alt + f4

该给分了吧，
另外，不如把
// document.frm.submit();//提交表单
换成(以下伪码)
window.location=escape(your for.action.toString()+"?x1="+pos.x1+"&y1="+pos.x2+"....");++:
escape
>> used to create strings to add to a URL...
>> return (ISO Latin-1 character set)encoding另外，感谢你给我了一个提示。
我可以把XX局的xxx局长的#@$@$@#$“设计思想：网页可圈可点还可保存取出”打发了。
写{
SQL   想哭，怎么不把各种数据库的SQL语句统一了？
       --（笑）不行，我们统一了，便宜了你们了！
JAVA  想笑，作为客户程序员总是比类创建者轻松，不用考虑得很细腻，基本正确即可；
       --（怒）您知道我们有多辛苦么,NND？
DHTML 想怒，客户的想象力还真丰富，并且洞察秋毫~~"
       --（骂）这种小程序应该很简单吧，你说很难？扯[option（胆,j8蛋，）]。
XHTML 想骂，美工大姐，您能不能给属性加上引号，能不能给不闭合的标记后面加个/?
       --（哭）我是美院毕业的，不是计（音“妓”）院毕业的，我[option(实在，确实，就是，一定)]学不会......
}

Yeah!搞定乐!多谢多谢!
还有...楼上最后说的几条,同感同感!
JavaSript很少用所以水平很次,碰到老大的需求往往就满足不了乐最后...告诉你们我做这个东西干什么的吧
是学校的校报,老大说要做个电子版,要做成体坛周报的形式(他肯定喜欢看体坛周报的网站的)-: )
这样我必须设计个程序来让他们找人做图片的MAP,这就是我要取出矩形框坐标的用处
呵呵

调试易

求代码,对于熟悉JavaScript的高手们应该很简单了...

解决方案 »