Coordenadas del raton al dar clic en una imagen

Hola de nuevo, en esta  oportunidad les compartiré como poder obtener las coordenadas de del ratón  cuando le damos clic  sobre una imagen determinada por ejemplo un mapa o  cualquiera que sea el caso.

  • Lo primero es agregar la librería de Jquery +1.7.
  • Para la solución implementaremos la  función offset () esta función no  presenta la posición de un elemento teniendo en cuenta las márgenes de este.
  • Agregar la imagen deseada a la página.
  • Por ultimo agrego un div donde se imprimirán las coordenadas del raton cuando doy clic.
  • Por ultimo agrego el siguiente script
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="application/javascript">
$(document).ready(function() {
  $('img').click(function(e) {
    var offset = $(this).offset();
    $('.coordenadas').html('<strong>X:</strong> '+(e.clientX - offset.left)+ '  <strong>Y:</strong> '+ (e.clientY - offset.top));
  });
});
</script> 

El codigo para la imagen seria el siguiente.

<img src="http://www.constructoraalpes.com/images/mapa.jpg" />
<div class="coordenadas" style="font-size:22px; color:#F00; margin-top:20px;"></div>

Si todo sale bien tendríamos que ver algo como esto.

Añadir nuevo comentario

Resumen Firma

Carlos Hernan Aguilar Hurtado

Desarrollador WEB

Hola,Soy ingeniero informático radicado en la ciudad de Santiago de Cali orientado al trabajo con soluciones WEB, apasionado por la tecnología siempre en la búsqueda de herramientas y alternativas para mejorar el resultado de los objetivos que se presentan con el día a día.

Carlos Hernan Aguilar Hurtado