HTMLpointHTMLpoint HTMLpoint.com


 Mousetrace 1/2

  semana 51 - 24 enero 2000

El script de esta semana trata sobre la posibilidad de acompañar el clásico cursor del ratón con otra imagen que siga sus movimientos a una distancia establecida y que se pare sólo cuando el ratón salga del área de documento. Para que el efecto resulte agradable y no moleste a quien consulta el documento, es aconsejable reducir al mínimo las dimensiones de la imagen, de manera que se vea pero no resulte pesada. En nuestro ejemplo hemos utilizado una imagen de 20x20 píxel en formato gif.

Para facilitar la comprensión del ejemplo y ordenar lo más posible el código, hemos agrupado parte del mismo en un file externo con extensión js. Esta solución tiene además la ventaja de poder producir el mismo efecto en varios documentos gracias a una simple invocación al file externo.

El ejemplo consta de 3 file:
  • esempio.htm [el documento en el que se produce el efecto]
  • mouse.js [el file externo que contiene buena parte del código]
  • htmlit.gif [la imagen que acompaña al cursor del ratón]
Para comprender más fácilmente el presente script, haz siempre referencia a los file antedichos, verificando los procedimientos y datos expresados. Sólo de esta manera, con una comparación continua, podrás entender las peculiaridades de este Javascript.

mouse.js

El file "mouse.js" establece diversas funciones relativas a las coordenadas X Y de posición del ratón.

En particular, el código:

yy_ml=(event.clientX + document.body.scrollLeft);
yy_mt=(event.clientY + document.body.scrollTop);


hace referencia a las coordenadas horizontales (clientX) y verticales (clientY) del cursor del ratón relativas al área cliente de la ventana.

Otras propiedades del objeto "event" relativas a los eventos del ratón son "OffsetX" y "OffsetY", "screenX" y "screenY". Las primeras se refieren a las coordenadas del ratón en el contexto de rendering, y las segundas a las relativas a la pantalla.

El file externo "mouse.js", para el correcto funcionamiento de la demo, no debe modificarse en ningún punto.


  Vuelve a principio de página