Las transparencias en los enlaces

Aunque hay algunas referencias al tema de las transparencias en otro post, esta es una explicación rápida tratando de contestar a varias consultas sobre el tema.

La transparencia (o su opuesto, la opacidad) de un elemento puede ser modificada mediante el uso de una propiedad especial que difiere según sea el navegador que utilizamos. Por eso, porque cada uno las trata de manera diferentes es que debemos usarlas todas si queremos que nuestro blog se vea correctamente.

Hay dos propiedades básicas, hacen lo mismo pero cada uno es exclusiva de un navegador:

opacity: valor (valores entre 0 y 1) es el standard aceptado y funciona en Firefox, Safari y Opera.
filter:alpha(opacity=valor) (valores entre 0 y 100 es la propiedad a usar en Internet Explorer.

Estas otras dos suelen ponerse pero son usadas por versiones viejas de ciertos navegadores; su uso es optativo:

-moz-opacity: valor (valores entre 0 y 1) era usado por navegadores basados en como MozillaNetscape Navigator.
-khtml-opacity: valor (valores entre 0 y 1) es la versión antigua para Safari.

Este sería un ejemplo del uso de la propiedad para obtener una transparencia del 50%:

.tranparente {
  filter:alpha(opacity=50);
  -moz-opacity:0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
}

El uso de esta propiedad depende de cada uno de nosotros. Lo más común es hacerlo en los enlaces, utilizando el evento onmouseover:

Podemos hacerlo de dos maneras, incluyendo el estilo en la plantilla:

a:link, a:visited { /* el enlace tiene cierta transparencia */
  filter:alpha(opacity=70);
  opacity: 0.7;
}
a:hover { /* que desaparece al pasar el mouse */
  filter:alpha(opacity=100);
  opacity: 1;
}

O bien lo podemos hacer directamente en un enlace específico:

<a href="direccionURL">
  <img src="URLimagen" 
    style="filter='alpha(opacity=70)'; opacity='0.7';" 
    onmouseover="this.style.filter='alpha(opacity=100)'; this.style.opacity='1';" 
    onmouseout="this.style.filter='alpha(opacity=70)'; this.style.opacity='0.7';" />
</a>