Cambio de imágenes (II): Transiciones

1 . Tipos de transiciones
2 . Modificar el script de cambio de imágenes

En Internet Explorer 4.x y superiores, existe la posibilidad de definir transiciones entre una imagen y otra. Podemos extender el índice con imágenes que cambian al pasar el ratón por encima, colocando una transición al dejar de señalar una opción con el ratón.

Tipos de transiciones

Existen 24 transiciones predefinidas en el Explorer 4. Vamos a indicarlas con su código identificativo y una demostración práctica. Pasa el ratón por encima de la imagen y verás que, al retirarlo, la imagen original no aparece inmediatamente, sino tras una transición:

Identificador	Nombre	Demostración
0	Box in
1	Box out
2	Circle in
3	Circle out
4	Wipe up
5	Wipe down
6	Wipe right
7	Wipe left
8	Vertical blinds
9	Horizontal blinds
10	Checkerboard across
11	Checkerboard down
12	Random dissolve
13	Split vertical in
14	Split vertical out
15	Split horizontal in
16	Split horizontal out
17	Strips left down
18	Strips left up
19	Strips right down
20	Strips right up
21	Random bars horizontal
22	Random bars vertical
23	Random

Modificar el script de cambio de imágenes

La idea es lograr que nuestros menús se comporten de esta manera en Explorer, pero que se puedan ver sin problemas en otros navegadores. Para ello modificaremos el script que realizamos en el artículo que inauguró esta sección del taller web: Cambio de imágenes. Lo primero que haremos será declarar un estilo que contenga la transición:

<STYLE TYPE="text/css">
.imgTrans {
  filter:revealTrans(duration=1, transition=10)
}
</STYLE>

Hemos escogido la transición número 10 (checkeboard across), con una duración de 1 (este parámetro indica la velocidad a la que se desarrollará la animación de transición). Para poder utilizarla, las imágenes que utilizamos deberán tener este estilo recién definido:

<A HREF="../recursos.htm"
   onMouseOver="act('menu0');"
   onMouseOut="desact('menu0');">
 <IMG NAME="menu0" SRC="menu0.gif" BORDER=0 class="imgTrans"></A>

Por último, deberemos arrancar y parar las transiciones según corresponda. Para lograrlo deberemos modificar las funciones act y desact. Cada elemento en JScript posee una colección (vector) llamada filters desde la que podremos acceder a los objetos Filter asociados. Estos objetos disponen de varias propiedades y métodos que no vamos a ver aquí. Ahora nos interesan sólo tres:

apply()

Permite el uso de esta transición en el objeto. Esto es necesario porque pueden existir varios filtros definidos, pero sólo uno ejecutandose a la vez.

play()

Hace comenzar la animación.

stop()

Para la animación de la transición.

Por tanto, el ciclo de vida de estas transiciones será "apply", "play", "stop". Si nos aseguramos antes de que existe el filtro (es decir, que estamos en Explorer 4 o superior), podemos emplear los métodos explicados en nuestras funciones de imágenes:

function act(nombreImagen) {
  if(document.images[nombreImagen].filters != null)
    document.images[nombreImagen].filters[0].stop();
  if (document.images)
    document[nombreImagen].src=on[nombreImagen].src;
}

function desact(nombreImagen) {
  if(document.images[nombreImagen].filters != null)
    document.images[nombreImagen].filters[0].apply();
  if (document.images)
    document[nombreImagen].src=off[nombreImagen].src;
  if(document.images[nombreImagen].filters != null)
    document.images[nombreImagen].filters[0].play();
}

De este modo, podremos mejorar visualmente nuestra web con poco esfuerzo y, aunque no todos los usuarios puedan verlo, al menos los demás no verán empeorada su visita.