IE-specifikke filtereffekter

Til sagen: Der er forskellige typer af filtre, du kan bruge, hver for sig eller i kombinationer:

• Visuelle filtre, der ændrer på elementets udseende
• Transitionsfiltre, der er overblændingsfiltre, det vil sige et filter, der afspiller en eller anden effekt idet der blændes over fra et element til et andet element.

Visuelle filtre

Mindsk opaciteten pr klik	Mindsk opaciteten glidende
Reset	Reset

Herover ser du 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. Syntaksen 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 procent 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)
	}
}

Jeg har (indtil videre?) lavet 9 websider, der beskriver nogle af de statiske filtre, og hvilke egenskaber, du kan benytte til at ændre på filtrenes effekt. Disse websider finder du i sektionen Statiske filtre.

Overblændingsfiltre

Den funktion, der afspiller filteret, ser således ud:

var startImage ="transitions/lion.png";
var endImage="transitions/cat.png";
function doWipe() {
  box.filters[0].apply();
  if (pix3.src.indexOf(startImage)!=-1) {
    pix3.src = endImage;
    box.style.backgroundColor = "skyblue";
  }
  else {
    pix3.src = startImage;
    box.style.backgroundColor = "gold";
  }
  box.filters[0].play();
}

Jeg forklarer denne funktion lidt nærmere på introduktionsside til overblændingsfiltrene. Hovedsagen er her initieringen af filtret, der foregår ved apply(). Det filter, der initieres, er sat i stylesheet'et for det eller de elementer, der skal indgå i overblændningen.

Funktionen udløses ved klik på knappen, men andre events er selvfølgelig mulige. Én event, jeg finder særlig interessant, er onLoad. Derfor har lavet en webside, hvor jeg fortæller lidt i dybden om, hvordan du blænder over på hele websider - Overblænding fra webside til webside.

Om overblændingsfiltrene har jeg lavet 17 websider, der gennemgår hver enkelt af de 17 filtre og deres egenskaber. Disse websider finder du i sektionen Overblændingsfiltre.

Afsluttende bemærkninger

Jeg kan ikke nok opfordre dig at læse Microsofts egne artikler om emnet. Med det, jeg her har skrevet, har jeg kun lige fortalt om de grundlæggende principper. Links til Microsofts meget fyldestgørende artikler finde du i boksen øverst i højre kolonne.

Oprettet 7. april 2003.