Un ratón con estela

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.

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.

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
HAY 33 COMENTARIOS
  • Marco dijo:

    Es bonito, pero me gustaria con mas imagenes y que no desapareciese al pasar por una tabla. Saludos, Marco

  • Christian Sanchez dijo:

    Todos tus manuales son muy buenos, muy faciles de entender. Deberias tratar de que en vez de un circulo sea una imagen cualquiera que uno desee.

  • Raul Dib dijo:

    Realmente los ejemplos y demostraciones son muy claros y de buen nivel...Felicitaciones Raul Bahia Blanca-Argentina

  • Daniel Rodríguez dijo:

    Bueno... no comprendo lo que dices de las tablas; en el artículo funciona perfectamente y toda la página está montada con tablas. En cuanto a los gráficos... yo es que soy programador, no grafista. Si encontráis algo mejor, pues utilizadlo.

  • Marco dijo:

    Al pasar sobre la tabla que tiene como fondo un color, desaparece la estela, no se por que. Sera por mi navegador (Explorer 4.5). Marc

  • David Ortega Mazzini dijo:

    Muchas gracias, esta muy bueno y me has ayudado bastante hacer este efecto.

  • el hornillo dijo:

    Muy buenas compañeros del metal!! Me encanta vuestra pagina pq vienen muchas chorraditas que en realidad son dp los que gustan mas que el contenido de la pagina. Una de ellas es esta del raton, yo le puesto con unas letras que tb quedan muy chulas. UN SALUDO y enhorabuena. P.D: No me ha dejado poner un '-' en la direccion de correo. Corregirlo!

  • lety dijo:

    los felicito por el trabajo que estan realizando de verdad es muy interesante

  • Ester dijo:

    Me encanta esta historia del la estela del ratoncito. Impacta y queda realmente gracioso. Muchíiiiisimas gracias!!!

  • atenojenes castro dijo:

    esta muy bien lo del raton y me gustaria saber como puedo utilizarlo en mi pagina de html. gracias.

  • Paco Mora dijo:

    Enhorabuena, porque la calidad de los contenidos es muy buena. Por otro lado, por qué no funcionan los enlaces?. Trabajo com frames y en el frame que produzco el efecto no actúan los enlaces al pulsar Click con el ratón. Salu2

  • Antonio J. dijo:

    Me gusto muchisimo tu articulo! aunque es el mas complejo que he leido hasta ahora, pero eso es normal, dado a la universalidad que le has dado al codigo. Esto me ha dado mas ideas para hacer mas cosas, y gracias a el he descubierto la utilidad de las capas (las cuales desconocia). Gracias al dueño del articulo por dedicar su tiempo.

  • Violeta dijo:

    espero que me sirva el tutorial. Hace un tiempo que vengo buscando como hacerlo ya que me parece entretenido.

  • Antonio C dijo:

    Con el título ya lo digo todo. Sencillo y fácil de poner en práctica. Enhorabuena.

  • JULIO dijo:

    Me parece muy estetico y util para aquellos que queremos una pagina impresionante y detallista, ya depende de cada uno cambiat el grafico como estela para el mouse, les doy gracias por este "bonito regalo" para nuestras webs.

  • Angel dijo:

    Gracias por tu ayuda estoy relizando una pagina para mi padre y queria que tuviese la estela del raton en su pagina. de antemano no te conosco pero eres un buen colega. gracias...

  • Jose dijo:

    Mira no entoendo mucho del hatml y del script y tol tinglao a si que te pido que si me puedes mandar una estela configurada pa mi pagina al correo, y la imagen por ej el circulito azul ese que sale hay o m la mandas como archivo adjunto. te lo agradeceria mucho

  • Juanmilla dijo:

    Muchisimas gracias por esto es sencillamente genial. Bueno un saludo,y animo para seguir con esto nos vemos.

  • Raul Ramos dijo:

    :p mmmmmm Puesami no me sale

  • Sergio I. Ortega B. dijo:

    Muy bien, antes un saludito, me llamó mucho la atención la estela del raton, y según yo seguí la copia fiel del codigo y todo pareció salir bien, pero el problema para mi son los vínulos, pues al señalar el vinculo, no lo marca aunque aparece la manita del cursor, pueden ayudarme????? De antemano muchas gracias y un saludo.

  • Juanjo dijo:

    Joder, más gente que no le va. A mí sí que me va. LO QUE NO SE PUEDE HACER ES COPIAR EL CODIGO AL PIE DE LA LETRA. COÑO, ES QUE TENEIS LA IMAGEN CIRCULO EN VUESTRO DISCO DURO. Vamos a ver. Para que vaya el código al pie de la letra teneis que tener un archivo html en un directorio dado. Después insertar en el lugar adecuado las funciones de JavaScript que se detallan. Tener un directorio graficos dentro del directorio actual de la web y el fichero circulo.gif dentro de dicho directorio,... si no ¿ como narices quereis que vaya ? RECOMENDACIÓN: ESTA ES UNA WEB PARA GENTE QUE YA SABE ALGO DE PROGRAMACIÓN, HTML, INFORMÁTICA DE VERDAD Y PROGRAMADORES QUE YA TIENEN EXPERIENCIA CON HTML Y SE ADENTRAN JAVASCRIPT, NO PARA NOVATOS QUE TODAVÍA NO SABEN LO QUE ES UN DIRECTORIO O UNA RUTA. Vaya gente joder, lo que hay que leer.

  • elvis lizandro catpo saavedra dijo:

    hola amigo, mi intension es crear un raton con estela, pero sin embargo quisiera que que mi estela fuera un nombre en vez de un circulo, mi deseo es que me envies todo el codigo html, para poder incluir dentro de mi pagina web, estare muy agradecido. gracias por darnos estas alternativas.

  • Sinsil dijo:

    realmente no soy especialista, ya vi un comentario de q no era para novatos, pero bien, necesitamos alguien q nos saque de la ignorancia. me gustaria poner una estela en mi pagina, pero no me sale.. si me puideran explicar mas detenidamente por mail, lo agradeceria, mil gracias

  • Alfonso dijo:

    Por accidente me he "tropezado" con tu comentario "(exabrupto)", en la web sobre "el ratón con estela" y aunque sea un poco tarde te voy a contestar en tus términos para que me entiendas. Tu lo que eres es un mamoncete, y te anticipo que no he escrito nunca en la Web a la que hago referencia. Yo si se HTML y tengo dos carrerreras universitarias, de las que una de ellas no se si tu serías capaz de hacerla, cuando yo la hice, pero no se puede hablar así a nadie por ignorante que sea, siempre que se esfuerce por aprender en un foro público y en una Web pública. Distinto sería si se metieran "en tu casa" para espiarte, posiblemente estaría de acuerdo contigo por la intromisión, pero esta web es pública y cada uno pregunta lo que quiere y pide lo que quiere y si no quieres no le constestes, "listillo". No obstante espero y deseo que es impetud "acojonador" se te pase con la edad. Perdona, en cualquier caso esto es solo una opinión mas, de las que me figuro habrás recibido

  • pedro dijo:

    he leido el comentario de juanjo en cuanto a los principiantes y demas. Yo soy programador universitario y entiendo HTLM pero TODOS somos principiantes en algo y NADIE se las sabe todas y sabe de todo en cualquier ambito. Por ejemplo este señor sabe muy poco de cooperacion y educacion.

  • Rosaura dijo:

    Hola guey soy rosaura de méxico y eres un presumido, pedante, creído, recuerda que ante todo tu también fuiste un novato o principiante y ahora que ya sabes nadie te da el derecho a sentirte más que los demás, ojala y cambies por que eres un pedante y esa gente siempre se queda sola. Restifica aun es tiempo, y recuerda que todos somos iguales, nadie es más que otra persona.

  • chinita dijo:

    El único que está jodiendo en este sitio web, eres tú. Creo que eres tu el que se tiene que dedicar a otra cosa porque bien sabras que un profesional como tu tendría que tener desarrollada su paciencia como todo programador, y en especial con las personas que piden tu ayuda. y si aun consideras estas preguntas tontas, hay un dicho que dice:"mas tonto es el tonto que le responde al tonto"

  • pedro dijo:

    No hagais caso a este pobre infeliz.... total, es tonto, que le vamos a hacer?, y el que nace tonto, crece tonto, se desarrolla tonto y muere tonto... no perdais el tiempo en intentar que razone, es simplemente, eso....tonto

  • hec spc dijo:

    pues tiene toda la razon hacer una pagina web no es como hacer un documento de word.. en el word no hay interactividad.. si es eso todo lo que sabes hacer no intentes hacer mas sin adentrarte. Coño! es muy fuerte el post que hay para que se lo hiciese para su pagina y el de los vinculos: Quieres hacer una pagina web y no saben como van los vinculos???? es como querer conducir y no saber que es un volante y un acelerador..... Gracias a windows nos creemos que la informatica es facil y para todos... y una puta mierda... si quieres hacer cosas buenas tienes que aprenderlo y paso por paso

  • Christian dijo:

    Quien puede ayudarme a hacer una ESTELA DE TEXTO osea el texto en movimiento del lado del cursor del lenguaje html pero lo q deseo es en el lenguaje JSP si alguien pudiera ayudarme le estaria agradecido.......... saludos a la gente chancona y cool...... .....YAES

  • Ivan gonzalez zamora dijo:

    En mi caso me dedico a la realizacion de software cuando aprendi visual basci que fue mi primer lenguaje de programacion cuando cambie el color de un form por codigo me senti emocionado ahora que domino varios lenguasjes de programacio me siento bien cuando ayudo a otros como yo a ser mejores programadores y si eresun estupido presumido

  • marko dijo:

    Un rton con estela? eso tengo q verlo , habia visto que el puntero dejara estela pero ... el raton... diablos debe ser algo increible, casi mágico

  • VANESA dijo:

    ESTE ES UNA EMPRESA DE ENCOMIENDA QUE FUNCIONA EN VENEZUELA TENGO UNA AMIGA QUE ME MANDA COSAS DESDE ESTADOS UNIDOS Y SIEMPRE FALTAN COSAS ELLOS INCLUSO SE NOTA COMO LAS CAJAS VIENEN ABIERTAS PORQUE NO SE TOMAN LA MOLESTIA SI QUIERA DE HACERLO BIEN.... QUE VERGUENZA QUE DE LO ULTIMO...... ELLOS LE ACHACAN LA CULPA A LA ADUANA... QUE TAL CON SKYCEL BIEN LEJOS

Conéctate o Regístrate para dejar tu comentario.