Övergångsfilter - Transitions

I PowerPoint och liknande program kan man använda sig av olika övergångar när en bild eller en text ska visas.
I Internet Explorer är det nu möjligt att åstadkomma denna effekt.

De två olika övergångar man kan använda sig av är i princip Blend Transition Filter och Reveal Transition Filter.

Blend Transition Filter

För att se hur övergångsfiltret kan du klicka på bilden, klicka gärna flera gånger. Som du ser tonas den första bilden ner medan den andra bilden tonas upp. Det här filtret är lämpligt att använda för bildspel med fotografier.

I likhet med med andra filter är man tvungen att först definiera filtret i det eventuella div-elementet där det ska fungera. Viktigt att komma ihåg är om elementet är relativt placerat, måste bredden eller höjden anges, för att filtret ska fungera.

Filtret blendTrans har ett attribut, nämnligen duration (varaktighet, längd). Denna varaktighet ges ett värde i sekunder. Det går också att ge ett värde i decimaler av sekunder. Att tänka på är att man ska använda sig av en punkt som decimaltecken. I ovanstående exempel har jag använt mig av en varaktighet på 5 sekunder.

För att åstadkomma ovanstående effekt på elementet har jag skrivit:

<IMG id="bild" src="photos/html/10fd.jpg" ALIGN=LEFT HSPACE=30 VSPACE=30
BORDER=0 ALT="" STYLE="filter:blendTrans(duration=5)"
onfilterchange="igng=0" onclick="blendstart()"><BR>

Efter detta applicerar man övergångsfiltret med apply() och spelar upp med play på samma sätt som tidigare gjorts med de visuella filtren.

bild.filters.blendTrans.Apply(); 	bild.filters.blendTrans.Play()

Man göra detta i samband med att filtret definieras. I sökvägen utelämnas document.all, detta kan göras om inget missförstånd kan uppstå.

Det kan vara nödvändigt att skriva en funktion med hjälp av ett javascript för att det ska fungera. Vid en händelse, här en klickning på bilden, anropas funktionen. Javascriptet läggs mellan HEAD-märkena.

<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!--
var igng = 0
var blendflg=0
function blendstart(){
	if (igng == 0){
		igng = 1
		bild.filters.blendTrans.Apply();
		if (blendflg==0){
			bild.src = "photos/html/21fd.jpg";
			blendflg=1
		}
		else{
			bild.src = "photos/html/10fd.jpg";
			blendflg=0
		}
		bild.filters.blendTrans.Play()
	}
}
		//-->
		</SCRIPT>

</HEAD>

Kommentar: Först definieras två flaggvariabler.
Variabeln igng som har värdet 1 så länge filtret spelas upp, får värdet 0 när filtret ändras. Detta för att hindra att en klickning anropar filtret under tiden det spelas upp, vilket kan ge en krasch som följd.
Variabeln flg som markerar vilken bild som visas, så att rätt bild kan anges till filtret. Du känner säkert igen konstruktionen från tidigare exempel.

Reveal Transition filter

Klicka på varghuvudet flera gånger, så får du se exempel på användning av RevealTrans-filtret. Klickar du på den text som visas så försvinner den.

I ovanstående exempel kan man se en del av de olika RevealTrans-filtren som finns. Det finns 23 stycken olika.

För att koppla ihop bilden med filtret har jag skrivit:

<IMG SRC="gifs/html/varg.gif" ALT="Ett varghuvud" HSPACE=20
BORDER=0 WIDTH=62 HEIGHT=64 ALIGN="Right" onclick="textspel()">

För att anropa funktionen i "textspel()" textblocket har jag skrivit:

<DIV id=textdiv style="position: relative; width:600; height:60;
font-size:14; color: darkorange; font-weight: bold;
background-color: white; text-align: center;
filter: revealTrans(duration=2, transition=0);"
onclick="this.innerText=' ';this.style.backgroundColor='white'">

Detta filter ska ha två attribut, det första, duration, är som vid blend varaktigheten, som även här mäts i sekunder. Det andra transition är ett tal 0-23 som visar vilken typ av övergång som ska användas. Här neda följer en uppställning av de engelska namnen på övergångarna och de tal som hör ihop med dem. Använder man värdet 23 slumpas övergången som ett tal mellan 0 och 22.

Övergångstyp	Värde	Övergångstyp	Värde
Box in	0	Random dissolve	12
Box out	1	Split vertical in	13
Circle in	2	Split vertical out	14
Circle out	3	Split horizontal in	15
Wipe up	4	Split horizontal out	16
Wipe down	5	Strips left down	17
Wipe right	6	Strips left up	18
Wipe left	7	Strips right down	19
Vertikal blinds	8	Strips right up	20
Horizontal blinds	9	Random bars horizontal	21
Checkerboard across	10	Random bars vertical	22
Checkerboard down	11	Random	23

Vid övergångstypen Box öppnas en rektangel, vid circle en cirkel. Wipe sveper i den angivna riktningen. Blinds ser ut som persienner som öppnas. Vid Checkerboard öppnas små fyrkanter, vid strips små remsor och vid bars litet större remsor. Dissolve löser upp bilden i punkter.

I ovanstående exempel används värdet 23. Klicka på varghuvudet ett slag så får du se de flesta av övergångarna.

Liksom med filtret Blend Transition är det nödvändigt att skriva en funktion med hjälp av ett javascript för att det ska fungera. Funktionen som sedan styr text-spelet har fått namnet textspel().

<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!--
var frg=new Array("blue","green","darkorchid","darkgreen","olive","sienna")

transtext = new Array(6)
transtext[0] = "För varje gång du trycker på varghuvudet längst upp
                till höger på skärmen få du en ny text. Klickar
                du i stället på själva texten så försvinner den."
transtext[1] = "Det finns fem olika texter. Varje  text visas
                med en speciell övergång. Det finns 22 olika
                övergångar i Internet Explorer 4.0 och senare
                versioner. Dessutom ändras även bakgrundsfärgen på
                texten."
transtext[2] = "Det är endast i Internet Explorer 4.0 och senare
                versioner, som övergångar fungerar. Prövar man med
                Netscapes webbläsare händer ingenting"
transtext[3] = "Även övergångar är en typ av filter. De sätts in
                i stildefinitionen på samma sätt som övriga filter."
transtext[4] = "Här väljs övergångarna  slumpvis, därför kan det
                ibland hända att samma övergång kommer två gånger
                i följd."
transtext[5] = "Lite längre ned i texten finns det en tabell över
                de olika övergångar som finns."


var trs = -1

function textspel(){
    if ( textdiv.filters.revealTrans.status == 0 )
    {	textdiv.visibility="visible"
		if (trs ==5) 
		{trs=0}
		else{
			trs++
			}
		textdiv.filters.revealTrans.transition=23
		textdiv.filters.revealTrans.apply()
		textdiv.style.backgroundColor = frg[trs]
		textdiv.innerText = transtext[trs]
		textdiv.filters.revealTrans.play()
	 }
}
		//-->
		</SCRIPT>

</HEAD>

Klicka på knapparna för att backa tillbaka eller för att läsa vidare om HTML-guiden.