Vamos
a ver ahora algunas de las aplicaciones más comunes del lenguaje
JavaScript al tratamiento de imágenes, y 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 esta, 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 este 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 pués:
<a
href= "#" onmouseOver="document.ejemplo1.src='manzana2.jpg';"
onClick="return false;">
<img name="ejemplo1" src="manzana.jpg" width="150"
height="121" border="0">
</a>
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:
<a
href= "#" onmouseOver="document.ejemplo2.src='manzana2.jpg';"
onClick= "return false;" onmouseOut="document.ejemplo2.src='manzana.jpg';">
<img name="ejemplo2" src="manzana.jpg" width="150"
height="121" border="0">
</a>
Pero
hay un problema. Cuando se activa el evento onmouseOver, nuestro código
llama a la imagen activa manzana2.jpg, 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?
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:
<script
language="JavaScript" type="text/javascript">
imagenOn = new Image(150,121);
imagenOn.src = "manzana2.jpg";
</script>
</head>
<body>
<Palign= center>
<A href= "#" onclick="returnfalse;" onmouseover="document.ejemplo.src='manzana2.jpg';"
onmouseout="document.ejemplo.src='manzana.jpg';">
<IMG name="ejemplo" src="manzana.jpg" alt="ejemplo
de rolloversimple" width="60" height="60" border="0">
</A>
</P>
...
...
</body>
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 imagen 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:
<script
language= "JavaScript"type= "text/javascript">
var estado = false;
imagenInicial = new Image(60,60);
imagenOn = new Image(60,60);
imagenClick = new Image(60,60);
imagenInicial.src = "images/avatar.gif";
imagenOn.src = "images/avatar2.gif";
imagenClick.src = "images/avatar3.gif";
function over( )
{
if(estado = = false)
{
document.ejemplo.src = imagenOn.src;
}
else
{
return;
}
}
function out( )
{
if(estado = = false)
{
document.ejemplo.src = imagenInicial.src;
}
else
{
return;
}
}
function pulsar( )
{
document.ejemplo.src = imagenClick.src;
estado = true;
}
</script>
</head>
<body>
<P align=center>
<A href="#" onmouseout="out();" onmouseover="over();"
onclick="pulsar();return false;">
<IMG name="ejemplo" src = "images/avatar.gif"
alt= "ejemplode rollover simple" width= "60" height
= "60" border = "0">
</A>
</P>
...
...
</body>
Explicamos
el código 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, si no 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 (el 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.
Si
observáis el código fuente de paginas con este efecto,
veréis que el código tal vez esté escrito de otra
forma, mas "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 porqué
ocurren estos cambios en una imagen.
Artículo
de Luciano Moreno (Dep. Diseño Web BJS Software)
