Coordenadas del ratón con Javascript

10/Feb/2008 JavaScript , , , 10 Comentarios

En este ejemplo vamos a ver como podemos conocer las coordenadas del ratón con Javascript. Para ello, el ejemplo consistirá en volcar sobre dos campos de entrada de un formulario los valores de las coordenadas X,Y donde se encuentra posicionado el puntero del ratón.

Lo primero que hacemos es crear el formulario. Esto no debería de suponernos muchos problemas:

  1. <form action="#">
  2. <label for="x">X: </label><input type="text" id="x">
  3. <label for="y">Y: </label><input type="text" id="y">
  4. </form>
  5.  

Todo el control de las coordenadas y el volcado al formulario lo haremos en el método Javascript coordenadas:

  1. function coordenadas(event) {...}

Dicho método lo lanzaremos cuando se produzca el evento onMouseMove. Es decir, cada vez que movamos el ratón. Para ello, la invocación la hacemos desde la etiqueta BODY. Hay que tener en cuenta que el parámetro de este método es event. Es decir el evento que se está produciendo (movimiento del ratón). Dicho evento llevará la información relativa a las coordenadas del ratón.

  1. <body onMouseMove="coordenadas(event);">

Si nos centramos en el contenido del método coordenadas, vemos que la información de las coordenadas del ratón está en las variables event.clientX y event.clientY. Es por ello que el código será tan sencillo como volcar el valor de dichas coordenadas a los campos del formulario.

  1. <script type="text/javascript">
  2. function coordenadas(event) {
  3. x=event.clientX;
  4. y=event.clientY;
  5.  
  6. document.getElementById("x").value = x;
  7. document.getElementById("y").value = y;
  8.  
  9. }
  10. </script>

Vemos que utilizamos el método getElementById para acceder a los campos del formulario.

Vídeos sobre Javascript


10 comentarios en “Coordenadas del ratón con Javascript”

Víctor Cuervo

dmv

Este ejemplo fue justo lo que necesitaba, muchas gracias ^_^.

Víctor Cuervo

Víctor Cuervo

Nos alegra mucho que te haya servido.

Saludos.

Víctor Cuervo

Víctor Cuervo

@Lluís, me alegro que haya sido de utilidad.

Víctor Cuervo

Víctor Cuervo

@Koldob, Pues ni idea. Pero me parece curioso, voy a ver si me entero de como sería.

Víctor Cuervo

Lluís

Muchísimas gracias por el artículo. Me ha sido de enorme utilidad.

Víctor Cuervo

Koldob

Me parece muy interesante y sencillo, yo quisiera aplicarlo a varios ratones conectados al PC.
Los ratones están conectados a distintas USB,cómo debo modificar el código?
Muchas gracias.

Víctor Cuervo

Daniel

Super, muchas gracias.

Víctor Cuervo

Jotaele

Yo acabo de probar el ejemplo con IE7 y me ha funcionado perfectamente

Víctor Cuervo

Carlos Coloch Camacho Hedz.

Estuvo bueno este codigo, pero las coordenadas para un gráfico es un aproximado, con esto pude iniciar para asignar coordenadas a un archivo grafico, prueba y corrección.
Gracias.

Víctor Cuervo

Juanjo

Esto no sirve para IE

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*