Códigos y Trucos, Opacidad de imágenes en FireFox

22 Octubre, 2007

Si estáis viendo este artículo desde tu navegador FireFox, ya pudisteis comprobar de qué efecto de visualización de imágenes estamos hablando (por las variaciones de opacidad en las imágenes de arriba).

Este es un llamativo, útil, y sencillo efecto que te enseñaremos hacer, con un pequeño código que agregaremos en cualquier código de imagen.

El truco consiste en aprovechar una gran característica de FireFox, en donde podemos cambiar el nivel de opacidad de la “misma imagen”, es decir que no hay que subir o en lazar distintas imágenes (como tendríamos que hacerlo para IE), sino que la misma imagen normal, le iremos ajustando el nivel, y haciendo que se vea más o menor opaca.

Para realizarlo, solo tenemos que incluir en cualquier código de imagen, el siguiente style: style=”-moz-opacity:0.7″. En el cual la numeración 0.7 equivale al nivel de opacidad. Por ejemplo, en la primera imagen, el nivel de la opacidad es 0.2, en la segunda 0.4, y en la imagen final logramos la normalidad con un nivel 1.

El style se agrega justo después de la imagen, lo que vendría a significar que quedaría así:

<img src=”tuimagen.jpg” style=”-moz-opacity:0.7″ />

Tened en cuenta, que los niveles con los que podéis jugar son de 0.1 (que sería casi invisible), y 1 (totalmente visible).
También se puede lograr este efecto de opacidad sobre la marcha, al pasar el cursor del ratón por encima de una imagen.

Pasad el cursor sobre la imagen

Para lograrlo, solo tendréis que adicional al código de cualquier imagen, lo siguiente: onMouseover = “this.style.MozOpacity = 1″ onMouseout = “this.style.MozOpacity = 0.5″. Lo que vendría a significar que el primer nivel (e este ejemplo “1″), sería cuando tenemos el ratón sobre la imagen, y “0.5″ al quitar el ratón.

El código quedaría así:

<IMG style=”-moz-opacity:0.5″ src=”photo.jpg” onMouseover=”this.style.MozOpacity=1″ onMouseout=”this.style.MozOpacity=0.5″>

Aunque podéis notar que en este sencillo código, tenemos 3 niveles distintos de opacidad:

1. 0.5 Para el estado inicial
2. 1 ratón encima
3. 0.5 ratón fuera

¿Que aplicaciones le podéis dar?

Se puede utilizar este efecto en algunos anuncios, en algunos banners y aquellas imágenes que deseáis resaltar o disimular. O en los casos en que deseáis estimular a los visitantes a interactuar con las imágenes que figuran en tu blog, space o página web.

• Lo malo de este truco,.. es que el segundo efecto (el del cursor), solo funciona al 100% en FireFox _ya que el primero también funciona en Opera, Safari, etc_.

• Y lo mejor, es su tremenda sencillez y rapidez. Ya que para lograr el mismo efecto en Internet Explorer, hay que utilizar javascripts _que por lo general requiere de algún tipo de instalación (carga adicional de css, archivos, imágenes, etc ..)_.

menéame

fresqui