Un ratón con estela

1 . ¿Qué necesitamos?
2 . Objeto Estela
    2.1 . Inicialización
3 . Funciones auxiliares
4 . Inicialización

Ultimamente parece haberse puesto de moda en muchas páginas web el hecho de que el ratón vaya dejando una estela. Te enseñamos a hacerlo de modo que funcione en todos los navegadores de versión mayor a la 4.

¿Qué necesitamos?

Lo primero que vamos a necesitar para poder realizar esta técnica, son los gráficos que compondrán la estela. En el código en el que basamos este ejemplo, vamos a tener sólo uno llamado circulo.gif.

De todos modos, el código permite que tanto el número de gráficos que componen la estela, como los nombres de los mismos sean fácilmente sustituibles. Lo normal sería tener un gráfico por cada elemento que compone la estela, pero como nosotros lo vamos a hacer con círculos, solamente utilizaremos uno cuyo tamaño cambiaremos adecuadamente.

Por otro lado, en el código utilizaremos el objeto DetectorNavegador que ya utilizamos en artículos anteriores.

Objeto Estela

Cada uno de los gráficos que componen la estela será un objeto Javascript distinto al que daremos el nombre de Estela. Para inicializarlo utilizaremos el siguiente constructor:

// Objeto Estela
function Estela(capaID, anchura, altura, nombreImg) {
  this.x = 0;
  this.y = 0;
  this.mover = MoverEstela;
  this.seguirRaton = EstelaSeguirRaton;
  document.write(soporta.NS4 ?
    "<layer id='" + capaID + "' left=" + this.x + " top=" + this.y +
    " width=" + anchura + " height=" + altura + ">" :
    "<div id='" + capaID + "'" + " style='position:absolute;left:" +
    this.x + "; top:" + this.y + "; width:" + anchura + "; height:" +
    altura + ";'>");
  document.write("<img src='" + nombreImg + "' width=" + anchura +
    " height=" + altura + " border=0>");
  document.write(!soporta.NS4  ? "</div>" : "</layer>");
  this.capaRef = (soporta.DOM) ? document.getElementById(capaID) :
    (soporta.IE4) ? document.all[capaID] : document.layers[capaID];
  this.estiloRef = (soporta.NS4) ? this.capaRef : this.capaRef.style;
}

El constructor toma cuatro parámetros: el nombre que tendrá la capa (puede ser cualquiera, siempre que no se repita), la altura y anchura de la imagen y el nombre del fichero que contiene la misma. Lo que hace, primero, es construir las referencias adecuadas para los métodos y propiedades del objeto. Dispondrá de dos propiedades (x e y), que contendrán la posición de la capa, y dos métodos (mover y seguirRaton) que permitirán que la capa se mueva, ya sea a unas coordenadas concretas o las que en ese momento posea el ratón.

Lo siguiente es escribir el código HTML correspondiente a la capa. Esta capa contendrá el gráfico (y sólo eso), tendrá su misma altura y anchura y el nombre que le hayamos pasado como parámetro. Estará colocada en las coordenadas x=0 e y=0, que corresponden a la esquina superior izquierda. Hay que tener en cuenta que la estela estará en estas coordenadas sólo el tiempo que tardemos en mover el ratón, por lo que no resultan muy importantes.

Finalmente, crea un par de referencias: a la capa y al objeto que contiene los atributos de la misma. Esto es necesario porque cada navegador alberga dichas referencias con nombres distintos.

Vamos a ver ahora que hacen los métodos:

function MoverEstela(x,y){
  this.estiloRef.left = x;
  this.x = x;
  this.estiloRef.top = y;
  this.y = y;
}

Este método simplemente mueve la capa a las coordenadas indicadas, actualizando a la vez las propiedades x e y).

function EstelaSeguirRaton(e){
  this.mover(
    soporta.IE4 ?
      event.clientX + (soporta.DOM ? document.body.scrollLeft : 0) :
      e.pageX+2,
    soporta.IE4 ?
      event.clientY + (soporta.DOM ? document.body.scrollTop : 0) :
      e.pageY+2);
}

Este resulta más complicado. También mueve la capa, pero lo hace a las coordenadas a las que actualmente indique el puntero del ratón. Para averiguar éstas, necesitamos de un objeto de tipo Event al que llamamos e. Este objeto sólo está disponible en el momento en que sucede un evento, por lo que no podremos averiguar las coordenadas del ratón hasta que se produzca uno.

Tanto Explorer como Netscape disponen de propiedades que permiten acceder a la posición del puntero del ratón, pero tienen nombres distintos. De hecho incluso pueden tener valores distintos dependiendo de si estamos utilizando Explorer 4 o 5. Pero bueno, en el código tenéis la "solución" universal.

Inicialización

Una vez escrito el código del objeto, necesitaremos inicializar diversas instancias del mismo; una por cada gráfico que forme parte de la estela:

var soporta = new DetectorNavegador();
var numImg = 6;
var ritmo = 50;
var estelas = new Array(numImg);
estelas[0] = new Estela("est1", 30, 30, "graficos/circulo.gif");
estelas[1] = new Estela("est2", 25, 25, "graficos/circulo.gif");
estelas[2] = new Estela("est3", 20, 20, "graficos/circulo.gif");
estelas[3] = new Estela("est4", 15, 15, "graficos/circulo.gif");
estelas[4] = new Estela("est5", 10, 10, "graficos/circulo.gif");
estelas[5] = new Estela("est6", 5, 5, "graficos/circulo.gif");

En la variable numImg indicaremos el número de gráficos que componen la estela. Mejor dicho, el número de capas que contienen gráficos y que forman parte de la estela. Conviene aclararlo porque, en nuestro caso, estrictamente hablando, sólo disponemos de un gráfico. La variable ritmo indica la velocidad a la que la estela seguirá al ratón. Modificándola se puede variar sustancialmente el efecto. Por último, el vector estelas contiene los objetos Estela necesarios. Podéis ver cómo el nombre del gráfico no cambia en cada uno de ellos, pero sí su tamaño.

Funciones auxiliares

Para que todo el tinglado funcione, necesitaremos un par de funciones auxiliares:

function seguirRaton(e){
  estelas[numImg-1].seguirRaton(e);
}

Esta función es un controlador de evento que será llamado cuando el ratón se mueva. En tal caso le comunicará al último de los objetos Estela que componen el vector estelas (en nuestro ejemplo, el círculo más pequeñito) que se coloque en las mismas coordenadas que el puntero del ratón. Pero eso sólo mueve uno, así que necesitamos otra función para mover a los demás:

function ciclo(){
  for (i=0;i<(numImg-1);i++)
    estelas[i].mover(estelas[i+1].x,estelas[i+1].y);
  setTimeout("ciclo()", ritmo);
}

Esta función va recorriendo el vector de estelas del primer al penúltimo elemento, indicandole a cada uno que debe tomar la posición que tenía en el anterior ciclo el círculo inmediatamente anterior. Esta función es la que se encarga, por tanto, del movimiento de todos los demás círculos.

También se encarga de llamarse a sí misma con una espera de "ritmo" milisegundos. Si no lo hicieramos así no se produciría esa especie de inercia que se puede observar cuando se ejecuta esta técnica, pues todos los círculos seguirían al ratón a tal velocidad que no nos enteraríamos de nada.

Inicialización

Por último, debemos realizar un par de tareas de inicialización si queremos que todo este tinglado empiece a funcionar:

if (soporta.DHTML) {
  if(soporta.NS4)
    document.captureEvents(Event.MOUSEMOVE);
  document.onmousemove=seguirRaton;
  setTimeout("ciclo()", ritmo);
}

Básicamente, hacemos dos cosas: capturamos el evento de movimiento de ratón y le decimos que en caso de que ocurra llame a nuestra función seguirRaton y le decimos que ejecute ciclo por primera vez dentro de un ratito.

Y eso es todo, si quereis podeis ver el código fuente de esta página y copiar el código Javascript literalmente en las vuestras y vereis que funciona sin problemas.