Aplicación práctica - Rollover simple

10 de junio de 2001

Aprende paso a paso la forma de construir un rollover.

Vamos a ver ahora algunas de las aplicaciones más comunes del lenguaje JavaScript al tratamiento de imágenes. Sin duda la más conocida de ellas es el efecto conocido como rollover, en el que al pasar el cursor sobre una o más imágenes de nuestra página, éstas cambian dinámicamente, apareciendo una nueva imagen. Posteriormente, cuando el cursor se va de ésta, el sistema vuelve a su estado inicial.

Vamos a empezar con un rollover simple, de una sóla imagen, ya que con él podremos explicar con claridad las bases teóricas de la construcción de este tipo de efectos.

Tenemos pués una imagen en nuestra pantalla, y lo primero que deseamos en que al pasar el cursor sobre ella pase algo, pero hemos visto que el objeto Image no admite de forma estándar el evento que necesitamos: onmouseOver. Para solucionar esto hemos visto en el capítulo anterior que podemos recurrir a situar nuestra imagen dentro de un enlace, ya que éste sí admite el evento que necesitamos.

Por lo tanto, situamos la imagen, con el atributo border igualado a 0, dentro de un enlace, al que vamos a dejar el cursor estándar, ya que normalmente los rollover se usan para menús, y en estos la pulsación debe llevar a una nueva página, por lo que con el cursor en forma de mano el usuario sabrá que eso es un enlace. No obstante, en el ejemplo que vamos a construir no vamos a apuntar a ninguna página en concreto, para no perder la atención, así que vamos a llamar a la página # (que no es ninguna), y en el evento onClick añadiremos return false.

¿Qué ponemos dentro del evento onmouseOver del enlace?. Inicialmente, vamos a acceder desde él a la propiedad src de la imagen que contiene, y vamos a cambiar esta ruta, de forma que la imagen, aún llamándose igual, apunte a otro fichero gráfico, con lo que el cambio será efectivo. Para ello necesitamos haber asignado un name a la imagen. El código que necesitamos es pues:

que nos da:

Bien, ya nos cambia la imagen, pero....¿cómo hacemos que se vuelva a la original cuando el cursor deja la nueva?. Muy facil, usando el evento onmouseOut de forma análoga a como hemos usado onmouseOver:

¡Qué bonito!. Pero hay un problema, y gordo. Cuando se activa el evento onmouseOver nuestro código llama a la imagen activa avatar2.gif, pero esta imagen no está cargada en la memoria caché del navegador, por lo que éste necesita hacer una nueva petición HTTP al servidor para pedírsela, cargarla luego en memoria y por último mostrarla en pantalla. Resultado de todo esto: hay un periodo de tiempo en el que la imagen inicial desaparece y se muestra en su lugar un recuadro vacío. ¿Cómo podemos solucionar esto?.

Fácil, amigo. Basta con precargar la imagen activa antes de que se ejecute el código del evento, ya que así el navegador la tendrá disponible en su caché y el proceso de cambio de imágenes será instantáneo. Para precargar una imagen debemos usar el método constructor de objetos Image en la cabecera de nuestra página, y en él debemos especificar tanto el tamaño de la imagen que deseamos cargar como la ruta de la misma. Nuestro código queda:

y su resultado es el que sigue:

También podemos crear un rollover compuesto en el que, además del efecto que ya hemos obtenido, se presente una nueva imagen si el usuario hace click sobre la activada. Para ello sólo es necesario precargar otra imagen y acceder de nuevo a la propiedad src, esta vez mediante el evento onClick.

Pero para ello, esta vez vamos a definir unas cuantas funciones, una para cada evento, en la cabecera de la página, y vamos a llamarlas con los eventos. Examina el siguiente código:

cuyo resultado es el que sigue:

y que podemos explicar un poco:

En el script de la cabecera declaramos los 3 objetos Image que nos van a hacer falta, uno para la imagen inicial (imagenInicial), otro para la activa (imagenOn) y el tercero para la imagen que debe aparecer al hacer click (imagenClick), estableciendo sus rutas de acceso, con lo que dichas imágenes se cargarán en la caché del navegador al empezar a cargar la página.

Seguidamente creamos 3 funciones, una para cambiar la imagen en pantalla en cada uno de los casos posibles, y luego en el enlace en que está incluida la imagen en el BODY llamamos a cada función mediante el evento correspondiente.

Si el usuario pincha en la imagen, esta cambiará, pero al salir el cursor de ella volverá a su estado inicial. Como ahora no nos interesa que ocurra esto, sino que lo que queremos es que una vez pinchada la imagen ésta permanezca ya fija, lo que hacemos es declarar una variable contador, de tipo booleano, al principio del script, y lo hacemos fuera de toda función para que sea de caracter público, es decir, que pueda ser accedida en cualquier momento por cualquier función de nuestro código.

Por último, en la función pulsar( ), que es la que llamamos mediante el evento onClick, cambiamos el valor de esta variable contador a true, y establecemos en los códigos de las funciones over( ) y out( ) que se cambie la imagen sólo en el caso de que contador sea false. Con esto nos aseguramos que el cambio de imagen al pasar el cursor y al quitarlo sólo se realice en caso de que antes no se haya hecho click en la imagen.

En caso de que se haya hecho ya click (contador valdrá true), las funciones over( ) y out( ) sólo ejecutarán la orden return, que en realidad no hace nada, sólo detener la ejecución de la función.

Resulta un poco lioso de explicar con palabras simples, pero si miras el código de arriba detenidamente, lo entenderás bien.

Bueno, amigos. Esto es todo respecto a la creación de un rollover simple. Si observáis el código fuente de páginas con este efecto veréis que el código tal vez esté escrito de otra forma, más "profesional", pero creo que una explicación basada en la aplicación clara y directa de los eventos y propiedades del objeto Image es el método más claro de entender por qué ocurren estos cambios en una imagen.

En el siguiente capítulo vamos a avanzar un poco más, estudiando la creación de rollovers múltiples.

Luciano Moreno

Consultor, diseñador y desarrollador web en ParaRedeBJS. Especialista en usabill...

Manual

Tratamiento de imágenes en Javascript

El constructor de objetos Image

Aplicación práctica - Rollover múltiple