Transparencias usando Scriptaculous

Así como podemos permutar la visibilidad de un elemento cualquiera modificando sus propiedades CSS, también podemos hacer lo mismo con su transparencia (más información).

En este caso, las propiedades que las controlan varían según sea el navegador que utilizamos así que lo normal es agregarlas todas y que el navegador escoja la que va a utilizar, la otra, la ignorará:

En Internet Explorer:
filter:alpha(opacity=valor) un valor entre 0 (transparente) y 100 (opaco)

En Firefox:
opacity: un valor entre 0.0 (transparente) y 1.0 (opaco)

Es muy fácil de aplicar (más información):

Lo más sencillo es establecer una clase CSS que agregamos antes de </b:skin> o entre etiquetas <style> y </style>. Por ejemplo:

<style type="text/css">
.demoTransparencia {filter:alpha(opacity=50); opacity:0.5}
.demoTransparencia:hover {filter:alpha(opacity=100); opacity:1.0}
</style>

La usamos de esta forma:

<div class="demoTransparencia"> ... el contenido ... </div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip.

Si usamos Scriptaculous, las posibilidades de manejar las transparencias se amplian ya que, como muestran en Woork, le podemos agregar algún efecto extra.

Para eso, vamos a insertar un pequeño script antes de </head>:

<script type="text/javascript">
//<![CDATA[
function changeOpacity(id) {
$opacityStatus = $(id);
if($opacityStatus.value==0) {
new Effect.Opacity(id, {duration:0.5, from:1.0, to:0.5});
$opacityStatus.value = 1;
} else {
new Effect.Opacity(id, {duration:0.5, from:0.5, to:1.0});
$opacityStatus.value= 0;
}
}
//]]>
</script>

Lo que hace ese script es muy simple; cada vez que se lo ejecuta, verifica la opacidad del elemento. Si es opaco lo hace transparente y viceversa. Allí, hay tres valores que podemos establecer:

duration:0.5 es la duración del efecto, el tiempo que tarda entre dos estados
from:1.0 el valor opaco (sin transparencia)
to:0.5 el valor final de la transparencia

Para aplicarlo, usamos eventos; por ejemplo onmouseover y onmouseout:

<div id="demo1" style="filter:alpha(opacity=50); opacity:0.5;" onmouseover="javascript:changeOpacity('demo1')" onmouseout="javascript:changeOpacity('demo1')">
... el contenido ...
</div>

Lo mismo podría hacerse usando el evento onclick:

<div id="demo2" style="filter:alpha(opacity=50); opacity:0.5;" onclick="javascript:changeOpacity('demo2')">
... el contenido ...
</div>

En este ejemplo, usamos una imagen, al hacer click sobre ella, el texto a la izquierda permutará de estado:

<div>
<img onclick="javascript:opacidadS('demoO3')" src="URL_imagen" class="izquierda" />
<span id="demoO3" style="filter:alpha(opacity=50); opacity:0.5;">
... el contenido ...
</span>
</div>