HTMLpointHTMLpoint HTMLpoint.com


 MouseTrace 1/2

 por Massimiliano Valente

Entre las funciones que el HTML dinámico ha introducido en la publicación de documentos para el web, las referidas a los efectos gráficos son quizá las menos útiles pero, seguramente, las más atractivas. Gracias a la implementación de código dinámico es posible animar los documentos HTML con efectos que, en otro caso, podrían obtenerse tan sólo con programas específicos y plug-in, tales como Macromedia Shockwave y similares. Respecto a estos últimos, HTML dinámico tiene la ventaja de no precisar plug-in específicos y de garantizar un extrema velocidad de realización de los efectos.

En este artículo analizaremos los efectos especiales en HTML dinámico sobre "Mousetrace".

Mousetrace se refiere a la posibilidad de añadir al clásico cursor del ratón 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. Perché l’effetto risulti piacevole e non desturbi chi consulta il documento, è consigliabile ridurre al menimo le demensioni dell’imagen, rendendola visibile ma non engombrante. Nel nostro esempio abbiamo utilizzato un’imagen de 75x25 píxel en formato gif con color de fondo transparente.

Para hacer más fácilmente comprensible el ejemplo y lo más ordenado posible el código, hemos agrupado parte del mismo en un file externo con extensión js. Esta solución tiene, entre otras, la ventaja de que varios documentos pueden condividir el mismo efecto mediante un simple llamamiento del file externo.

El archivo "mouse.js" establece distintas funciones relativas a las coordenadas X Y de situació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, mientras que las segundas son las relativas a la pantalla.

Para un correcto funcionamiento de la demo, el archivo externo "mouse.js" no debe modificarse en ningún punto.


  Vuelve a principio de página