我怎么能显示（X，Y）的实时坐标图像给用户，当用户将鼠标悬停他的鼠标在图像？ [英] How could I display (x,y) coordinates on image in real-time to the user when the user hovers his mouse over the image?

问题描述

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

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="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();
            }); 
    });

现场演示： 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.

这篇关于我怎么能显示（X，Y）的实时坐标图像给用户，当用户将鼠标悬停他的鼠标在图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！