Si el elemento al que queremos aplicar el efecto es una estructura HTML, debe estar contenida entre <div> </div>: así vamos a hacer con la tabla. El contenedor debe tener necesariamente un "id" único que le identifique:
<div id="containerAlpha2" class="ejAreas1">
<table class="rightArea2Table" cellspacing="2" cellpadding="2" width="120" border="0">
<tr>
<td class="rightArea2Header" valign="top"> Artículos</td></tr>
<tr>
<td class="rightArea2Cell" valign="top"> Discos</td></tr>...
</table>
</div>
Y en la hoja de estilo asociada se le asigna el filtro correspondiente como una clase asociada a dicho contenedor:
#containerAlpha1
{
width: 90%;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)";
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}
Como se puede apreciar, el filtro se define dos veces en la misma regla. esto es debido a que la sintáxis es diferente para versiones de Internet Explorer inferiores o iguales a IE8 (1º formato) y para las superiores a IE8 (2º formato).
Finalmente, se puede embeber el filtro dentro del código HTML del elemento (mediante style), con lo que ya no sería necesario identificarle con un id:
<div class="ejAreas1" style="width: 90%;-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(opacity=50)';
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);">... </div>
Sólo en el caso de las imágenes no es necesario ponerlas dentro de un contenedor, sino que pueden tener el id directamente asociado:
<img id="containerAlpha1" src="images/vela.gif" alt="Aspecto con Filtro Alpha" /></div>
|