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()
.
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 |
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.
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 er det eneste statiske filter, der virker i Internet Explorer 4 og 5. Jeg illustrerer dette filter på figurerne herunder:
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