Как я могу отображать (x, y) координаты на изображении в реальном времени для пользователя, когда пользователь наводит указатель мыши на изображение?

Question

У меня есть квадратное изображение / график, на котором пользователь щелкает.

Есть ли способ отображать (x, y) координаты курсора для пользователя в режиме реального времени, когда пользователь наводит курсор мыши надизображение (пользователю не нужно нажимать на изображение)?

Answer 1

Это должно сделать это:

HTML

<img id="the_image" src="http://placekitten.com/200/200" />
<div id="coords"></div>

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 (обновлено): http://jsfiddle.net/az8Uu/2/

Примечание: Регулирование Было бы неплохо также обработчик перемещения мыши, чтобы избежать вызова функции каждые 4 миллисекунды.

Answer 2

Вот, пожалуйста,

HTML:

<img class="coords" src="http://i.imgur.com/bhvpy.png">

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/

С моим обновленным кодом вы можете иметь несколько изображений с этой функцией - просто добавьте к изображениям класс "coords".

Примечание. Этот код должен находиться внутри обработчика load (вместообработчик ready), потому что мы должны прочитать размеры изображения, которые мы можем сделать только для полностью загруженных изображений.

Answer 3

В зависимости от ваших требований, что-то на основе:

$("img").mousemove(function(e) {
    console.log(e.layerX + ", " + e.layerY);
});