我有一个正方形图片/图上，用户点击。

I have a square image/graph on which the user clicks.

有没有一种方法来显示（X，Y）坐标光标到实时的用户，只要用户将鼠标悬停在图像（用户不需要点击图片）？

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)?

推荐答案

在这里你去：

HTML：

<img class="coords" src="https://m.xsw88.com/allimgs/daicuo/20230910/181.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();
            }); 
    });

现场演示： http://jsfiddle.net/pSVXz/12/

使用我的更新code，你可以有多个图像使用这一功能 - 只需将该类添加COORDS将图像

With my updated code, you can have multiple images with this functionality - just add the class "coords" to the images.

注：此code的是负荷在处理程序（而不是就绪）处理器，因为我们要读取图像的尺寸，我们只能做完全加载的图像。

Note: This code has to be inside the load handler (instead of the ready) handler, because we have to read the image's dimensions which we can only do for fully loaded images.