Webdesign 101: Internet Explorers filtre

Alpha-filtret

Alpha-filteret er et filter, hvormed du kan justere opaciteten (gennem­skinne­lig­heden) af et element. Egenskaben arves, således at såvel figur som figurbaggrund i nedenstående eksempel påvirkes.

Vis effekten

Stylesheet formregel:

filter: progid:DXImageTransform.Microsoft.Alpha
(enabled='false', style=1, opacity=0, 
finishOpacity=100, 
startX=0, finishX=100, startY=100, finishY=0);

enabled-værdier: true for visning af effekten, false for uændret.

style-værdier: 0 for uniform, 1 for linear, 3 for radial, 4 for rectangular.

orientation-værdier: vertical, horizontal.

Opacity-værdier: Fra 0 (transparent) til 100 (100 % uigennemskinnelig).

finishOpacity-værdier: Fra 0 (transparent) til 100 (100 % uigennemskinnelig).

startX-værdier: Opaciteten i venstre kant: Fra 0 (transparent) til 100 (100 % uigennemskinnelig).

finishX-værdier: Opaciteten i højre kant: Fra 0 (transparent) til 100 (100 % uigennemskinnelig).

startY-værdier: Opaciteten i toppen: Fra 0 (transparent) til 100 (100 % uigennemskinnelig).

finishY-værdier: Opaciteten i bunden: Fra 0 (transparent) til 100 (100 % uigennemskinnelig).

Ændring af filteregenskaberne

Det script, der er knyttet til knappen til højre for billedet, er:

<script type="text/javascript">
function doTrans(objekt) {
	if (box.filters(0).enabled){
		box.filters(0).enabled='false';
		objekt.innerText='Vis effekten';
	}
	else {                                                        
		box.filters(0).enabled='true';
		objekt.innerText='Reset';
	}
}
</script>

Bemærk her, at jeg nøjes med at ændre enabled-værdien fra false til true og omvendt. Bemærk også den IE-specifikke metode til at forsyne knappen med ny tekst.