Cambio de imágenes (II): Transiciones

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.

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
ARTÍCULO ANTERIOR

¡SÉ EL PRIMERO EN COMENTAR!
Conéctate o Regístrate para dejar tu comentario.