关于图片坐标问题，有一点点难度。

时间：2022-11-16 20:06:40
我希望鼠标在图片上时变成十字并动态提示其在图片上的相对坐标，不是针对事个网页的。

11 个解决方案

#1

<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">
<!--
function move(o)
{
o.style.cursor = 'crosshair';

document.title = event.offsetX + ":" + event.offsetY;
}
//-->
</SCRIPT>
</HEAD>

<BODY>
<img src="http://community.csdn.net/ADV/Images/csdn120x360.GIF" id="aa" onmousemove="move(this)">
</BODY>
</HTML>

#2

谢谢你的答复，可能我没讲清楚，我希望在鼠标的提示中就显示其坐标，而不是在TITLE。ALT能改变吗？

#3

<script language="JavaScript">
function getCursor(){
var element=window.event.srcElement;
var offsetX=window.event.clientX;
var offsetY=window.event.clientY;
document.all.x.value=offsetX-element.offsetLeft;
document.all.y.value=offsetY-element.offsetTop;
}
</script>
<body>
<input type="text" name="x" value="">
<input type="text" name="y" value="">
<img src="../My%20Documents/My%20Pictures/20040929_downz_12.jpg" width="1024" height="768" onMouseMove="getCursor()" style="cursor: crosshair">
</body>

#4

<SCRIPT LANGUAGE="JavaScript">
<!--
function move(o)
{
o.style.cursor = 'crosshair';

o.title = event.offsetX + ":" + event.offsetY;
}
//-->
</SCRIPT>
<img src="http://community.csdn.net/ADV/Images/csdn120x360.GIF" id="aa" onmousemove="move(this)">

这个提示要慢点，你可以用一个层来模拟

#5

座标显示在光标下，就这样
<script language="JavaScript">
function getCursor(){
var element=window.event.srcElement;
var offsetX=window.event.clientX;
var offsetY=window.event.clientY;
showxy.style.left=offsetX;
showxy.style.top=offsetY;
showxy.innerText=(offsetX-element.offsetLeft).toString()+","+(offsetY-element.offsetTop).toString();
}
</script>
<body>
<div id="showxy" style="POSITION:absolute;">
</div>
<img src="../My%20Documents/My%20Pictures/20040929_downz_12.jpg" width="1024" height="768" onMouseMove="getCursor()" style="cursor: crosshair">
</body>

#6

TO ：ttyp(愿赌服输）我要的就是这个效果，但真是比较慢，有没有用层的例子啊。

#7

完美的，考虑了网页滚动的因素
<script language="JavaScript">
function getCursor(){
var element=window.event.srcElement;
var offsetX=window.event.clientX;
var offsetY=window.event.clientY;
showxy.style.left=offsetX+document.body.scrollLeft;
showxy.style.top=offsetY+document.body.scrollTop;
showxy.innerText=event.offsetX.toString()+","+event.offsetY.toString();
}
</script>
<body>
<div id="showxy" style="POSITION:absolute;">
</div>
<img src="../My%20Documents/My%20Pictures/20040929_downz_12.jpg" width="1024" height="768" onMouseMove="getCursor()" style="cursor: crosshair">
</body>

#8

试试我上面的这个，就是用层来实现的

#9

问题解决，结帐。再次谢谢，加分结贴。

#10

怎么搞的？加不了分。另外，鼠标移出的层还是显示。

#11

对分数负责，这样就不会显示了
<script language="JavaScript">
function getCursor(){
var element=window.event.srcElement;
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=(offsetX-element.offsetLeft).toString()+","+(offsetY-element.offsetTop).toString();
showxy.innerText=event.offsetX.toString()+","+event.offsetY.toString();
}
function hiddenDiv(){
showxy.style.display="none";
}
</script>
<body>
<div id="showxy" style="POSITION:absolute;">
</div>
<img src="../My%20Documents/My%20Pictures/20040929_downz_12.jpg" width="1024" height="768" onMouseMove="getCursor()" style="cursor: crosshair" onMouseOut="hiddenDiv()">
</body>

#1

<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">
<!--
function move(o)
{
o.style.cursor = 'crosshair';

document.title = event.offsetX + ":" + event.offsetY;
}
//-->
</SCRIPT>
</HEAD>

<BODY>
<img src="http://community.csdn.net/ADV/Images/csdn120x360.GIF" id="aa" onmousemove="move(this)">
</BODY>
</HTML>

#2

谢谢你的答复，可能我没讲清楚，我希望在鼠标的提示中就显示其坐标，而不是在TITLE。ALT能改变吗？

#3

<script language="JavaScript">
function getCursor(){
var element=window.event.srcElement;
var offsetX=window.event.clientX;
var offsetY=window.event.clientY;
document.all.x.value=offsetX-element.offsetLeft;
document.all.y.value=offsetY-element.offsetTop;
}
</script>
<body>
<input type="text" name="x" value="">
<input type="text" name="y" value="">
<img src="../My%20Documents/My%20Pictures/20040929_downz_12.jpg" width="1024" height="768" onMouseMove="getCursor()" style="cursor: crosshair">
</body>

#4

<SCRIPT LANGUAGE="JavaScript">
<!--
function move(o)
{
o.style.cursor = 'crosshair';

o.title = event.offsetX + ":" + event.offsetY;
}
//-->
</SCRIPT>
<img src="http://community.csdn.net/ADV/Images/csdn120x360.GIF" id="aa" onmousemove="move(this)">

这个提示要慢点，你可以用一个层来模拟

#5

座标显示在光标下，就这样
<script language="JavaScript">
function getCursor(){
var element=window.event.srcElement;
var offsetX=window.event.clientX;
var offsetY=window.event.clientY;
showxy.style.left=offsetX;
showxy.style.top=offsetY;
showxy.innerText=(offsetX-element.offsetLeft).toString()+","+(offsetY-element.offsetTop).toString();
}
</script>
<body>
<div id="showxy" style="POSITION:absolute;">
</div>
<img src="../My%20Documents/My%20Pictures/20040929_downz_12.jpg" width="1024" height="768" onMouseMove="getCursor()" style="cursor: crosshair">
</body>

#6

TO ：ttyp(愿赌服输）我要的就是这个效果，但真是比较慢，有没有用层的例子啊。

#7

完美的，考虑了网页滚动的因素
<script language="JavaScript">
function getCursor(){
var element=window.event.srcElement;
var offsetX=window.event.clientX;
var offsetY=window.event.clientY;
showxy.style.left=offsetX+document.body.scrollLeft;
showxy.style.top=offsetY+document.body.scrollTop;
showxy.innerText=event.offsetX.toString()+","+event.offsetY.toString();
}
</script>
<body>
<div id="showxy" style="POSITION:absolute;">
</div>
<img src="../My%20Documents/My%20Pictures/20040929_downz_12.jpg" width="1024" height="768" onMouseMove="getCursor()" style="cursor: crosshair">
</body>

#8

试试我上面的这个，就是用层来实现的

#9

问题解决，结帐。再次谢谢，加分结贴。

#10

怎么搞的？加不了分。另外，鼠标移出的层还是显示。

#11

对分数负责，这样就不会显示了
<script language="JavaScript">
function getCursor(){
var element=window.event.srcElement;
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=(offsetX-element.offsetLeft).toString()+","+(offsetY-element.offsetTop).toString();
showxy.innerText=event.offsetX.toString()+","+event.offsetY.toString();
}
function hiddenDiv(){
showxy.style.display="none";
}
</script>
<body>
<div id="showxy" style="POSITION:absolute;">
</div>
<img src="../My%20Documents/My%20Pictures/20040929_downz_12.jpg" width="1024" height="768" onMouseMove="getCursor()" style="cursor: crosshair" onMouseOut="hiddenDiv()">
</body>
标签：

相关文章