Tengo una imagen cuadrada / gráfico en el que el usuario hace clic.

¿Hay alguna forma de mostrar las coordenadas (x, y) del cursor al usuario en tiempo real cada vez que el usuario pasa el cursor sobre la imagen (el usuario no necesita hacer clic en la imagen)?

4
oxo 14 sep. 2011 a las 14:41

3 respuestas

La mejor respuesta

Aquí tiene:

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

Demostración en vivo: http://jsfiddle.net/pSVXz/12/

Con mi código actualizado, puede tener varias imágenes con esta funcionalidad, solo agregue la clase "coords" a las imágenes.

Nota: Este código tiene que estar dentro del controlador load (en lugar del controlador ready), porque tenemos que leer las dimensiones de la imagen, lo que solo podemos hacer para imágenes completamente cargadas.

7
Šime Vidas 16 sep. 2011 a las 18:02

Dependiendo de sus requisitos, algo basado en:

$("img").mousemove(function(e) {
    console.log(e.layerX + ", " + e.layerY);
});
2
cloakedninjas 14 sep. 2011 a las 11:20

Esto debería hacerlo:

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 (actualizado): http://jsfiddle.net/az8Uu/2/

Nota: Throttling el controlador de movimiento del mouse también sería una buena idea, para evitar llamar la función cada 4 milisegundos.

7
Jens Roland 14 sep. 2011 a las 11:37