Webdesign 101 » Dynamisk HTML » Internet Explorer filtre » Filtre

Filtre i IE4 og IE5

De filtre, der er beskrevet på de øvrige sider, fortolkes kun af Internet Explorer 5.5 eller nyere. Også metoderne til at scripte filtrene fortolkes kun af disse nyere Microsoft browsere.

Ønsker du at anvende overblændingsfiltre, der også kan vises i Internet Explorer 4 og 5 - som der fortsat er en del af (20-25 % af de besøgende på denne site bruger Internet Explorer 5) - er du nødt til at anvende den "gamle" metode.

For så vidt angår overblændingsfiltre hedder det "gamle" filter revealTrans(). Der findes kun ét visuelt eller statisk filter, der tolkes af disse ældre browsere. Det hedder blendTrans().

revealTrans overblændingsfiltre

Dem finde der 24 af. Du kan afprøve dem ved at klikke på linksene i nedenstående oversigt:

Transition 0: Box in
Transition 1: Box out
Transition 2: Circle in
Transition 3: Circle out
Transition 4: Wipe up
Transition 5: Wipe down
Transition 6: Wipe Right
Transition 7: Wipe left
Transition 8: Vertical blinds
Transition 9: Horizontal blinds
Transition 10: Checkerboard across
Transition 11: Checkerboard down
Transition 12: Random dissolve
Transition 13: Split vertical in
Transition 14: Split vertical out
Transition 15: Split horizontal in
Transition 16: Split horizontal out
Transition 17: Strips left down
Transition 18: Strips left up
Transition 19: Strips right down
Transition 20: Strips right up
Transition 21: Random bars horizontal
Transition 22: Random bars vertical
Transition 23: Random

Reset

Demo

Nu er der jo ikke meget grin ved blot at få noget til at forsvinde (eller komme til syne). Derfor har jeg lavet en webside uden tekst, hvis formål alene er at demonstrere disse filter i en mere virkelighedsnær situation - nemlig overblænding fra et element til et andet: revealTrans() demo.

Anvendelsesmetoder

Jeg tror den hyppigste anvendelse for disse filtre er overblænding fra én webside til en anden webside. Det er i hvert fald den måde, jeg selv har brugt dem (til diverse skærmshows, der kører i en browser i lukkede systemer).

Syntaksen for denne form for overblænding er ganske enkel. Overblændingen gennemføres af en meta-markør med følgende udseende:

<meta http-equiv="Page-Enter" 
content="revealTrans(transition=1, duration=2)">

Der er to anvendelige http-equiv-værdier, nemlig den viste, Page-Enter, samt en, der hedder Page-Exit.

I content-delen af meta-markøren sætter du filterets nummer samt en værdi i sekunder for duration (varighed).

Vil du lave overblændingen på et element på siden, en div eller et billede, således som er vist på demosiden, skal de to elementer være absolut positionerede og ligge oven på hinanden. Det script, der gennemfører overblændingen på det øverste element, ser således ud:

function doTrans(objekt,nr,sek) {
    blok = document.getElementById(objekt);
    nr = parseInt(nr);
	doTransIE(blok,nr,sek)
}
function doTransIE(blok,nr,sek) {
    blok.style.filter = 
	-->	"revealTrans(duration=" + sek + ",
	-->	transition=" + nr + ")";
    endState = "hidden";
    blok.onfilterchange = clearFilt;
    blok.filters.revealTrans.apply();
    blok.style.visibility = endState;
    blok.filters.revealTrans.play();

}

function clearFilt() {
    blok.style.filter="";
	setTimeout('resetBox()',1000)
}
function resetBox(){
document.all.box.style.visibility="visible"
}

Den funktion, der udløser en overblænding, ser således ud:

doTrans('box',11,3)

... når overblænding nr. 11 skal udføres over 3 sekunder på et element, hvis ID er box.

blendTrans()-filtret

blendTrans-filtret er det eneste statiske filter, der virker i Internet Explorer 4 og 5. Jeg illustrerer dette filter på figurerne herunder:

 

Billede med overblænding

 

HTML-koden, der indsætter de to billeder, ser således ud:

<img id="lion" src="../transitions/lion.png" 
style="filter:blendTrans(duration=2)">
<button onClick="blendLion('../transitions/cat.png')">
Vis kat</button>
<button onClick="blendLion('../transitions/lion.png')">
Vis løve</button>

Det script, der udfører overblændingen, ser således ud:

function blendLion(pix) {
    lion.filters.blendTrans.Apply();
    lion.src = pix;
    lion.filters.blendTrans.Play();
}

Funktionaliteten er fuldstændigt mage til det alpha-filter, der er et af de mange statiske filtre, der tolkes af Internet Explorer 5.5 eller nyere. Det er ikke så mærkeligt, for det er det samme filter. Det kan du bl.a. se af, at syntaksen for aktivering af alpha-filtret i de nyere browsere faktisk også virker i Internet Explorer 4 og 5:

function doFilter(){

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

Oprettet 14. april 2003

I denne sektion:

Introduktion til filtre
Overblændingsfiltre
Filtre i Explorer 4 og 5
Statiske (visuelle) filtre
Webside overblænding

E-mail nyhedsbrev

Vælg normal præsentation

Vis siden som den ser ud i udskrift Send siden til udskrift.