Animation, også med *.jpg

Siden er opdateret 13.12.2007

Når man vil lave animerede billeder, skal de som bekendt ligge i formatet *.gif. I midlertid har gifformatet lavere farveopløsning end *.jpg, hvorfor det ikke egner sig specielt til fotos.

Vil du lave en animation med *.jpg, kan du benytte denne metode, der udskifter et antal enkeltbilleder med et defineret interval og i en sløjfe (det begynder forfra efter sidste billede).

Det hele ligger i et enkelt relativt simpelt script anbragt mellem <head> og </head> samt et kald i body-erklæringen, der kalder den funktion, som blev erklæret i scriptet. Her ser du først scriptet:

<script type="text/javascript">
image1= new Image
image1.src ="bil1.jpg"
image2= new Image
image2.src ="bil2.jpg"
image3= new Image
image3.src ="bil3.jpg"
image4= new Image
image4.src ="bil4.jpg"
image5= new Image
image5.src ="bil5.jpg"
image6= new Image
image6.src ="bil6.jpg"
image7= new Image
image7.src ="bil7.jpg"
image8= new Image
image8.src ="bil8.jpg"
image9= new Image
image9.src ="bil9.jpg"
image10= new Image
image10.src ="bil10.jpg"

nr=1;

function golink()
{
if (nr==1)
location.href="http://din.web.adresse.dk";
if (nr==2)
location.href="mailto:dig@din-mailvært.";
if (nr==3)
location.href="http://hjemmesideskolen.dk";
if (nr==4)
location.href="mailto:erik.ginnerskov@get2net.dk";
if (nr==5)
location.href="http://hjemmesideskolen.dk";
if (nr==6)
location.href="http://hjemmesideskolen.dk";
if (nr==7)
location.href="http://hjemmesideskolen.dk";
if (nr==8)
location.href="http://hjemmesideskolen.dk";
if (nr==9)
location.href="http://hjemmesideskolen.dk";
if (nr==10)
location.href="http://hjemmesideskolen.dk";
}

function skift()
{
nr++;
if (nr==11) nr=1;
document.animation.src="bil" + nr + ".jpg";
setTimeout("skift()",15);
}
</script>

Efter scripterklæringen ser du i første kodeblok definitionen af de billeder, som skal indgå i animationen. Jeg har lavet et forløb med en bil, der bevæger sig et stykke hen ad en vej for hvert billedskift.

Det er vigtigt, at billederne hedder det samme + et tal fra 1 - det sidste billede og billedernes format skal være identisk med det, der er defineret i scriptet. Vil du bruge *.gif-billeder, skal du overalt i scriptet udskifte jpg med gif.

Med et længere interval mellem de enkelte skift kan man have helt forskellige billeder, når blot størrelsen (højde × bredde) er den samme.

Derefter følger i en enkelt linje bestemmelse af det billede, der skal startes med.

Næste kodeblok definerer de links, der skal knyttes til de enkelte billeder. Har du lavet en lille film, er det en fordel, at alle links er ens. Har du valgt at lave et forløb med forskellige billeder, der vises i længere tid, kan du uden problemer have forskellige links (både weblinks og mailadresser) tilknyttet de forskellige billeder.

Sidste kodeblok indeholder skiftefunktionen, d.v.s. der er defineret en tællefunktion, der lægger én til det aktuelle billede og efter fastlagt interval indsætter næste billede.

setTimeout("skift()",15) sætter intervallet mellem de enkelte billedskift i tusindedele sekunder. Sætter du f.eks. intervallet til 3000, går der 3 sekunder mellem hvert billedskift.

Nu mangler vi blot at lave dette kald til skiftefunktionen i body-erklæringen:

<body onload="skift()">

Dermed er vi færdig med at definere hele animationen, nu skal den blot anbringes på siden. Det sker på denne måde:

<img alt="" src="bil1.jpg" name="animation" onclick="golink();" title="Det kører" width="320" height="238">

her skal du lægge mærke til følgende:

Du vil opdage, at din animation mangler den indramning, du ser øverst på denne side. Jeg har lavet indramningen ved at putte animationen ind i en tabel, hvor jeg så har lavet rammen på tabellen.

^ Tilbage til sidens top

Valid XHTML og CSS / Copyright © Hjemmesideskolen maj 2000
Hjemmesideskolen
Du er her: Forsiden - scripts - Animation, også med *.jpg
Brugere lige nu: Antal aktive brugere
Home Mail