JMiur [E]

Hace años, la web era un cúmulo de GIFS animados, ahora, se han transformado en algo que los desarrolladores eluden como si se tratara de la peste negra.

Como cualquier otra herramienta, los GIFS no tienen nada de malo ni nada bueno, todo dependerá de lo que hagamos con ellos. En este caso, vamos a ver cómo podemos usarlos para darle un poco de vida a los enlaces. Para esto, necesitamos tener dos imágenes, una fija y una animada.

El enlace podría tener este código:
<a href="direccion_URL" 
onmouseout="getElementById('nombreUnico').src='URL_imagen_FIJA';"
onmouseover="getElementById('nombreUnico').src='URL_imagen_ANIMADA';">
<img id="nombreUnico" src="URL_imagen_FIJA"/>
</a>
Como siempre, escribimos todo en una sola línea y tenemos la precaución de darle al ID un nombre único, no repetido.

La imagen fija se mostrará como la imagen por defecto; cuando el puntero del ratón pase sobre el enlace (onmouseover), el script cambiará la dirección de esta y se mostrará la imagen animada. Cuando el puntero del ratón salga de encima del enlace (onmouseout), el script volverá a cambiar la dirección y mostrará la imagen fija.


Debido a que la única imagen cargada es la imagen fija y la imagen animada sólo se carga cuando se ejecuta el evento onmouseover, el efecto puede ser poco evidente ya que se producirá un retardo; habrá un momento en que no veamos nada. Esto, lo resolvemos utilizando JavaScript y "precargando" las imágenes animadas antes, por ejemplo, agregando a la plantilla, justo antes de </head> lo siguiente:
<script type='text/javascript'>
var animPic=new Array();
animPic[0]=new Image(ancho0,alto0);
animPic[0].src="URL_imagen_0";
animPic[1]=new Image(ancho1,alto1);
animPic[1].src="URL_imagen_1";
.............
animPic[N]=new Image(anchoN,altoN);
animPic[N].src="URL_imagen_N";
</script>
Donde animPic[] es un nombre cualquiera y, entre corchetes, comenzando con 0 (cero) vamos agregando, sucesivamente, todas las imágenes que queremos precargar, indicando la dirección URL de cada una y reemplazando alto y ancho por los valores correspondientes, expresados en pixeles.

Otra posibilidad es usar estas animaciones como fondos de un elemento. En ese caso, no sólo deberemos tener dos imágenes sino establecer dos clases CSS. Por ejemplo:
<style type="text/css">
.ejemplo-icono-fijo { /* la clase de la imagen fija */
width: anchopx;
height: altopx;
background:transparent url(URLimagenFija) no-repeat scroll left top;
}
.ejemplo-icono-animado { /* la clase de la imagen animada */
 width: anchopx;
height: altopx;
background:transparent url(URLimagenAnimada) no-repeat scroll left top;
}
</style>
Esto, lo podemos usar así:
<span class="ejemplo-icono-fijo" 
onmouseout="this.className="ejemplo-icono-fijo";"
onmouseover="this.className='ejemplo-icono-animado';">
...................
</span>
O como fondo de cualquier enlace o etiqueta.

8 comentarios:

Vistosbuenos  

Hola, Muy bueno tu blog te felicito...,

Responder
Gem@  

Un poquito complicado encontrar dos imágenes iguales y que una de esta sea animada :(
¿Alguna página donde descargarlas por ejemplo?

Responder
JMiur  

Una alternativa es buscar servicios online que creen GIFS ANIMADOS, ahora no recuerdo ninguno en particular pero los he visto.

La otra es usar un programa ¿Estoy confundido o alguna vez leí que usabas Paint Shop Pro? Pues si es así, incluye un accesorio llamado Animation Shop y con eso, a partir de una imagen fija, creas animaciones. De hecho, todas las que aqui se muestran fueron creadas así. Sólo es una imagen a la que se aplica un efecto y el resultado es una animación.

No importa la versión de PSP, si es vieja ... mejor. Yo estoy usando la antíquisima versión 7. Cualquier cosa, me avisas y te lo paso. Es muy sencillo de hacer, bastan dos o tres clicks y listo.

Responder
Gem@  

Voy a ver eso que dices, el que uso es el Print Shop Photo Pro también con más años que matusalen, pero igual lleva esa herramienta.
Gracias ;)

Responder
JMiur  

Entonces, tienes todo resuelto Gem@. Cargas una imagen y luego, Efectos, Transiciones. No creo que tengas problemas.

Responder
juanK  

Exelenteeee funciona rebien todo, echandole un poco de ojo se entiende.. la verdad esque me funciona perfect, y lo de precargar es muy util, ya que en Firefox se ve como lentooo sin ese java :)

yo puse dos imagenes distintas, no puse animacion, vean el ejemplo en la parte superior de mi blog

shaUs!

Responder
JMiur  

Bien juanK :)

Para este tipo de cosas, sean animaciones o dos imágenes diferentes, la precarga es imprescindible sino, siempre hay una demora indeseada.

Responder
JIM UTFSM  

@Jmiur
Dice: 'animPic[1].src="URL_imagen_0";'
Debe decir: 'animPic[1].src="URL_imagen_1";'
Para que lo arregles a la brevedad, aunque no es sustancial, es bueno que esté mejor :D

Ah y noté lo siguiente, en la sección:
'Socorro, mi página no valida'
y
'Los estilos por defecto'
Sus respectivos links están intercambiados ;)

Saludos desde el Cerro del Placer (Chile)

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR