javascript 当用户将鼠标悬停在图像上时，如何向用户实时显示图像上的 (x,y) 坐标？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7414984/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How could I display (x,y) coordinates on image in real-time to the user when the user hovers his mouse over the image?
提问by oxo
I have a square image/graph on which the user clicks.
我有一个用户单击的方形图像/图形。
Is there a way to display the (x,y) coordinates of the cursor to the user in real-time whenever the user hovers over the image (user does not need to click on the image)?
有没有办法在用户悬停在图像上时实时向用户显示光标的 (x,y) 坐标（用户不需要单击图像）？
回答by Jens Roland
This should do it:
这应该这样做：
HTML
HTML
<img id="the_image" src="http://placekitten.com/200/200" />
<div id="coords"></div>
Javascript
Javascript
$image = $('#the_image');
imgPos = [
$image.offset().left,
$image.offset().top,
$image.offset().left + $image.outerWidth(),
$image.offset().top + $image.outerHeight()
];
$image.mousemove(function(e){
$('#coords').html((e.pageX-imgPos[0]) +', '+ (e.pageY-imgPos[1]));
});
DEMO(updated): http://jsfiddle.net/az8Uu/2/
演示（更新）：http: //jsfiddle.net/az8Uu/2/
Note: Throttlingthe mousemove handler would be a good idea too, to avoid calling the function every 4 milliseconds.
注意：限制mousemove 处理程序也是一个好主意，以避免每 4 毫秒调用一次该函数。
回答by ?ime Vidas
Here you go:
干得好：
HTML:
HTML：
<img class="coords" src="http://i.imgur.com/bhvpy.png">
JavaScript:
JavaScript：
var tooltip = $( '<div id="tooltip">' ).appendTo( 'body' )[0];
$( '.coords' ).
each(function () {
var pos = $( this ).position(),
top = pos.top,
left = pos.left,
width = $( this ).width(),
height = $( this ).height();
$( this ).
mousemove(function ( e ) {
var x, y;
x = ( ( e.clientX - left ) / width ).toFixed( 1 ),
y = ( ( height - ( e.clientY - top ) ) / height ).toFixed( 1 );
$( tooltip ).text( x + ', ' + y ).css({
left: e.clientX - 30,
top: e.clientY - 30
}).show();
}).
mouseleave(function () {
$( tooltip ).hide();
});
});
Live demo:http://jsfiddle.net/pSVXz/12/
现场演示：http : //jsfiddle.net/pSVXz/12/
With my updated code, you can have multiple images with this functionality - just add the class "coords"to the images.
使用我更新的代码，您可以拥有多个具有此功能的图像 - 只需将类添加"coords"到图像中即可。
Note: This code has to be inside the loadhandler (instead of the ready) handler, because we have to read the image's dimensions which we can only do for fully loaded images.
注意：此代码必须在load处理程序（而不是ready）处理程序中，因为我们必须读取图像的尺寸，而我们只能对完全加载的图像执行此操作。
回答by cloakedninjas
Depending on your requirements, something based on :
根据您的要求，一些基于：
$("img").mousemove(function(e) {
console.log(e.layerX + ", " + e.layerY);
});
