Las imágenes en Blogger (Filtros)

Última parte de este tema. Opacidad, transparencias, filtros, herramientas que vale la pena conocer.

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. En Internet Explorer, es filter:alpha(opacity=valor) y en Firefox es opacity:valor

filter:alpha(opacity=valor) un valor entre 0 (transparente) y 100 (opaco)
opacity: un valor entre 0.0 (transparente) y 1.0 (opaco)

Si el elemento contiene otro elemento, ambos son afectados

Sería lógico que todos los navegadores usaran el mismo juego de instrucciones y que los resultados fueran los mismos, pero eso no es así ¿Se debe elegir entre uno y otro? En este caso no hace falta, basta incluir ambas propiedades en el estilo. Si un navegador encuentra un código que no puede interpretar, simplemente lo ignora y continúa adelante. El siguiente ejemplo debería verse igual en ambos:

NOTA POST EDICIÓN:
Esto es cierto pero, por razones que escapan a mi entendimiento, Blogger se rehusa a dejar algunos filtros cuando se edita un post. Se pueden escribir pero desaparecen cada vez que se guarda. Por ejemplo, si uso Firefox desaparecen los de Internet Explorer. Los únicos que permanecen ajenos a esta censura son los que están incluidos en una rutina JavaScript.

Cansado de buscar una explicación resolví cortar por lo sano y creé una serie de clases que incluí en la plantilla. Mi método primitivo fue el siguiente:

.trans25 {opacity:0.25; filter:alpha(opacity=25);}
.......
.trans50 {opacity:0.50; filter:alpha(opacity=50);}

Puse tantas como necesitaba y seguí adelante, tal vez alguien pueda darme alguna solución más razonable. Fuera de Blogger, el uso de clases es optativo y las propiedades pueden agregarse directamente en el atributo STYLE de cualquier elemento.

Vencido y un poco harto, continúo con el tema.

La forma usual de usar estos filtros es anidando bloques. Por ejemplo:

<div ....... [ 1 ] ....... >
<div ....... [ 2 ] ....... >
<div ....... [ 3 ] ....... >
....... cualquier código HTML .......
</div>
</div>
</div>

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

En todos los casos, se agregó lo siguiente:

style="filter:alpha(opacity=40);opacity:.40;"
y en Blogger
class="trans40"

En el primer ejemplo se agregó en DIV [ 1 ], por lo tanto, todos los demás elementos se vuelven transparentes ya que están incluidos en él. En el segundo ejemplo se agregó en DIV [ 2 ] con lo que su contenedor, DIV [ 1 ] permanece opaco. En el tercer caso en DIV [ 3 ], por lo tanto, sólo su contenido se hizo transparente.

También es posible combinar imágenes con fondos de algún color para cambiar la tonalidad:

La estructura del código es la siguiente:

<div style="width:ancho; height:alto; background:color;">
<div style="width:ancho; height:alto; background:url(URL_imagen);
filter:alpha(opacity=75); opacity:.75;">
</div>
</div>
y en Blogger
<div style="width:ancho; height:alto; background:color;">
<div class="trans75" style="width:ancho; height:alto; background:url(URL_imagen);">
</div>
</div>

Como aplicación práctica, este filtro puede ser interesante para crear un efecto rollover.

¿Cómo funciona? Inicialmente, establecemos que la imagen tenga una cierta transparencia (en el ejemplo está al 40%) y luego, utilizamos dos de los llamados eventos para detectar cuando el cursor del ratón está sobre la imagen. Si es así, eliminamos la transparencia (opacidad = 100%) y por último, cuando detectamos que el puntero ya no está sobre la imagen, volvemos a hacerla transparente.

Los eventos están asociados a algún tipo rutina JavaScript y estos se ejecutan sobre casi todos los elementos HTML:

onmouseover="... instrucciones ..."
el puntero del ratón está sobre el elemento

onmouseout="... instrucciones ..."
el puntero del ratón salió del elemento

onclick="... instrucciones ..."
se hizo click sobre el elemento
ondblclick="... instrucciones ..."
se hizo doble click sobre el elemento

onmousedown="... instrucciones ..."
se oprimió el botón del ratón sobre el elemento

onmouseup="... instrucciones ..."
se soltó el botón del ratón sobre el elemento

onmousemove="... instrucciones ..."
el puntero del mouse se mueve sobre el elemento

¿Pero es necesario saber JavaScript? No, basta saber que una rutina que permita cambiar una propiedad de estilo del elemento se escribe con este formato:

this.style.propiedad='valor';
por ejemplo:
this.style.opacity='1';
y si queremos cambiar dos o más, las separamos con un punto y coma:
this.style.opacity='1'; this.style.filter='alpha(opacity=100)';
el valor siempre debe ir entre comillas simples

Por ejemplo, para cambiar la opacidad al pasar el cursor hay que agregar:

onmouseover="this.style.filter='alpha(opacity=100)'; this.style.opacity='1';" 

El código completo para una de las imágenes del ejemplo sería:

<img width=valor height=valor src="URL_imagen"
style="cursor: pointer; filter:alpha(opacity=40);opacity: 0.4;"
onmouseover="this.style.filter='alpha(opacity=100)'; this.style.opacity='1';"
onmouseout="this.style.filter='alpha(opacity=40)'; this.style.opacity='0.4';" />

Una forma menos engorrosa sería crear un clase e incluirla en la hoja de estilo de la plantilla:

a.efecto img {
filter:alpha(opacity=40);
opacity: 0.4;}

a.efecto:hover img {
filter:alpha(opacity=100);
opacity: 1.0;
}

Y en su forma más simple la deberíamos usar así:

<a class="efecto" href="URL_vinculo">
<img src="URL_imagen" />
</a>

IMÁGENES EN BLOGGER

Introducción

Bordes

Posicionamiento

REFERENCIAS

w3.org HTML

w3.org CSS