悬停在图像上时,如何显示带有x-y坐标的十字光标
How could I display a crosshair cursor with x-y coordinates when hovering over an image?
我在div中有一个图像,用户可以点击它。
当鼠标悬停在图像上时,有没有办法实时显示光标的坐标?我知道要显示十字光标,必须设置光标类型:cursor: crosshair
-但我怎么能显示这些坐标呢?
尝试:
$(function () {
$('#hover-img')
// show the coordinates box on mouseenter
.bind('mouseenter', function () {
$('#coordinates').show();
})
// hide it on mouseleave
.bind('mouseleave', function () {
$('#coordinates').hide();
})
// update text and position on mousemove
.bind('mousemove', function (evt) {
$('#coordinates').html(
(evt.pageX - this.offsetLeft) + '/' + (evt.pageY - this.offsetTop)
).css({
left: evt.pageX + 20,
top: evt.pageY + 20
})
});
});
注意:请参阅«所用html元素的演示。
<html>
<head>
<script>
function onMouseOver(Sender,e){
var x = e.x - Sender.offsetLeft;
var y = e.y - Sender.offsetTop;
document.getElementById('coord').innerHTML = x+"-"+y;
}
</script>
</head>
<body>
<img src="image.jpg" onmousemove="onMouseOver(this,event)">
<span id='coord'></span>
</body>
</html>
使用jQuery,您可以执行以下操作:
<script language="text/javascript">
$('#your_image').mouseover(function(e){
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
alert("X: " + x + " Y: " + y);
});
</script>
<html>
<head>
<script type="text/javascript">
function getAbsoluteOffset(htmlelement) {
var offset={x:htmlelement.offsetLeft,y:htmlelement.offsetTop};
while(htmlelement=htmlelement.offsetParent)
{
offset.x+=htmlelement.offsetLeft;
offset.y+=htmlelement.offsetTop;
}
return offset;
}
function image_onmouseout(ev) {
document.getElementById("mouseinfo").innerHTML="Mouse outside of image";
}
function image_onmousemove(ev) {
var offset=getAbsoluteOffset(this);
document.getElementById("mouseinfo").innerHTML=
"Coordinates in page: (x: "+ev.clientX+",y:"+ev.clientY+")"+
"<br/>"+
"Coordinates in image: (x: "+(ev.clientX-offset.x)+",y:"+(ev.clientY-offset.y)+")";
}
</script>
</head>
<body>
<div style="width:400px;height:400px;background:red;">
<img src="image.png"
onmouseout="image_onmouseout.call(this,event);"
onmousemove="image_onmousemove.call(this,event);" />
</div>
<span id="mouseinfo">Mouse outside of image</span>
</body>
</html>
示例:http://jsfiddle.net/HWMtc/
相关文章:
- EaseJS拖放;放下(动画CC)电影剪辑的鼠标坐标
- 如何在d3.js中返回路径的y坐标
- 在谷歌地图上获取事件的x,y坐标
- 通过ajax将坐标传递到php服务器端,并在处理后检索到javascript
- 当带有渲染器的DOM元素不在屏幕顶部时,移动了场景的坐标
- 如何在JS Leatflet绘图插件中获取圆的坐标
- 点击(右键点击)使用传单地图库获取图像覆盖的像素坐标
- 查找带有边框的HTML5 Canvas(点击)事件的坐标
- HTML5获取弧的坐标's结束
- 如何在OpenLayers中获取动态绘制的多边形的坐标
- 获取用户位置并将坐标保存在数据库中
- fabric js多边形集合坐标
- 使用D3.js和GeoJson在地图上的某些坐标上设置一个小图像
- 如何创建一个谷歌地图地理坐标数组
- AngularJS-如何在mousemove上存储鼠标坐标
- 使用地理坐标,对更靠近用户的对象进行排序'的位置
- 在坐标上模拟点击坐标js/jQuery
- ChartJS v2:点击坐标的比例值(时间比例)
- 通过鼠标点击获取X和Y坐标(javascript)
- 使用jQuery获取用户坐标