IE-specifikke overblændingsfiltre

Knappen udløser en funktion, doTrans(). Du kan naturligvis bruge en mængde andre hændelser til at udløse effekten, f.eks. onload-eventen.

Forudsætningen for, at du kan ændre på elementet ved hjælp af et af de filtre, der er omtalt i denne sektion, er, at elementet er forsynet med en formregel for egenskaben filter. Denne egenskab kan have et utal af værdier. Denne sektion går ud på at præsentere et fyldigt udvalg af disse, for så vidt angår overblændingsfiltre. De såkaldte visuelle eller statiske filtre finder du beskrevet i sektionen Statiske filtre.

Nedenstående viser et ganske typisk eksempel:

I eksemplet her ser stylesheet for kassen #box - der indeholder billedet af løvehovedet - således ud:

#box {
position:relative;
margin:20px 20px 20px 0;
width:300px;
height:250px;
border:1px solid black;
background-color:gold;
float:left;
filter: 
progid:DXImageTransform.Microsoft.Barn
(motion=out, orientation=vertical)
}

På de websider, jeg har lavet om de enkelte filtre, inklusive dette "gardin"-filter (hvis engelske navn er barn), kan du læse mere om, hvilke filtre, du kan bruge og hvilke værdier, der kan passeres til de enkelte filtre.

Websiderne om overblændingsfiltrene kan du se ved at benytte menuen til højre.

Funktionen doTrans() ser således ud:

var startImage ="lion.png";
var endImage="cat.png";

function doTrans() {
	box.filters[0].apply();
		if (pix.src.indexOf(startImage)!=-1) {
		    pix.src = endImage;
		    box.style.backgroundColor = "skyblue";}
		else {
		    pix.src = startImage;
		    box.style.backgroundColor = "gold";
		}
	box.filters[0].play();
}

Det, der foregår her, er følgende:

1. Først erklæres to variable, der indeholder hhv. filnavnet på det billede, der først skal vises og det billede, der skal blændes over til.
2. Så deklareres funktionen doTrans().
3. Første og sidste linie er to filterspecifikke metoder, nemlig apply() og play().
4. apply() påtrykker elementet - her box - de eller de filtre, der er defineret i stylesheet'et. Disse filtre har numre efter den orden, hvori stylesheet'et nævner dem. Som altid ved JavaScript starter nummereringen ved 0. Når der kun er ét filter, er nummeret altid 0.
5. play() "afspiller" filtret, så det kommer til sidst i funktionsdeklarationen. 2. linie undersøger, hvilket billede, der faktisk er indeholdt i pix-elementet (billedets ID). Hvis det er startImage, afspilles filtret, således at startImage (løven) erstattes med endImage(katten), og således at baggrundsfarven for elementet box ændres.
6. Bemærk, at filter-egenskaberne arves, så overblændingen finder sted både på elementet box og på elementet pix, der er billedet af et kattedyr.
7. Hvis betingelsen i 2. linie ikke er opfyldt, afspilles funktionens anden del, der bringer løvehovet på en gylden baggrund tilbage.

Dette JavaScript er ens på alle mine eksempler på overblændingsfiltre.

Den eneste forskel på de websider, der beskriver de enkelte filtre, og som du kan se ved at benytte menuen til højre, er filternavn og filter-egenskaber, der sættes i stylesheet'et.

Oprettet 5. april 2003