Statiske filtre

Forskellen er dog ikke større, end at også de statiske filtre kan ændres. Der kræves blot en lidt anderledes JavaScript syntaks.

I denne sektion gennemgår jeg en række af de statiske filtre og viser, hvilke egenskaber ved filtrene, du kan ændre på. I tilknytning til omtalen af det enkelte filter er der også et principeksempel på, hvorledes du ændrer filtrets egenskaber.

Statiske filtre

Herunder ser du et eksempel på virkningen af ét af de statiske filtre - alpha-filtret.

Mindsk opaciteten pr klik	Mindsk opaciteten glidende
Reset	Reset

Det er to billeder med samme motiv, men på billedet til venstre skinner baggrunden igennem. Det er fordi, dette billede er udsat for et filter ved navn alpha. Stylesheet'ets syntaks for denne effekt er:

#pix1 {
filter:alpha(opacity=50)
}

Opacitet betyder gennemskinnelighed og er komplementaren til transparens. Jo højere værdi - det vil sige jo større opacitet - des mindre transparens. Billedet til højre har opacity sat til 100 - det er overhovedet ikke gennemskinneligt.

Filtrets egenskaber kan ændres dynamisk, eftersom de er en del af browserens dokumentobjektmodel (hvis denne browser ellers tilhører Internet Explorer familien.) Det har jeg illustreret på billedet til venstre. Hvis du klikker på linket under billedet, mindsker du opaciteten med 10 % pr. klik. Syntaksen for dette er:

<script type="text/javascript">
function doTrans(){
	pix1.filters.item("alpha").opacity -= 10
}
</script>

Denne ændring kan du gennemføre glidende fra 100 % opacitet til 0 opacitet, som illustreret, hvis du klikker på linket under billedet til højre. Syntaksen for dette er:

function doFilter(){
	if (pix2.filters.item("alpha").opacity > 0) {
		pix2.filters.item("alpha").opacity -=5
		setTimeout('doFilter()',100)
	}
}

Det er værd at bemærke, at det element, et statisk filter skal anvendes på, skal have en reel udstrækning, som f.eks. i form af en width-egenskab.

På de websider, jeg har lavet om de enkelte filtre, inklusive dette alpha-filter, kan du læse mere om, hvilke filtre, du kan bruge og hvilke værdier, der kan passeres til de enkelte filtre.

Websiderne om de statiske filtre kan du se ved at benytte menuen til højre.

Jeg gør opmærksom på, at der er flere filtre, end jeg her omtaler. Den information, du finder på de links til Microsofts websider om emnet, der ser i boksen foroven til højre, er adskilligt mere fyldestgørende end mine skriblerier.

Oprettet: 1. april 2003