Webdesign 101 » Dynamisk HTML » Internet Explorer filtre

IE-specifikke filtereffekter

Internet Explorer 5.5 og nyere fortolker en stylesheet egenskab, der hedder filter. Ved hjælp af denne egenskab kan du give HTML-elementer nogle ganske interessante effekter.

Nytteværdien er behersket, der er tale om ren kosmetik. Kosmetikken kan dog af og til gøre noget, der i sig selv alene er funktionelt, et ganske smukt ansigt.

Min interesse for brugen af filtre er f.eks. opstået i forbindelse med et ønske om at lave overblændinger ved billedvisningen i form af online slideshows (Se mine artikler herom i sektionen Slideshows).

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

Visuelle filtre

Dorrit Tullet Dorrit Tullet
Mindsk opaciteten pr klik Mindsk opaciteten glidende
ResetReset

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.

OBS! hvis IE5 eller ældre

Disse effekter virker kun i Internet Explorer 5.5 eller nyere.

Læs om filtre, der virker i alle IE-versioner på websiden Filtre i IE4 og IE5.

Vigtigt: Læs også...

Introduction to Filters and Transitions
Visual Filters and Transitions Reference

I denne sektion:

Introduktion til filtre
Overblændingsfiltre
Overblændingsfiltre IE5
Statiske (visuelle) filtre
Webside overblænding

Andre browsere

Som det fremgår af disse artikler er det kun Internet Explorer 5.5 eller nyere, der fortolker filter-egenskaben. Du bør derfor have en browserfiltrering på websider, hvor du benytter denne egenskab.

E-mail nyhedsbrev

Vælg normal præsentation

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