© ilj ilj@flowsim.se
 Att göra en hemsida/ BILDER 2
OM ANIMERADE BILDER
 Exemplen fungerar i t ex Netscape Navigator 3.x och 4.x+, Mozilla 1.2.x+ o Microsoft Internet Explorer(MIE) 4.x+.

 
hur man gör en animation 1
 
STARTA!
 

 
hur man gör en animation 2 hur man gör en animation 3 hur man gör en animation 4 hur man gör en animation 5 hur man gör en animation 6
SÅ HÄR SER BILDERNA SOM ANVÄNTS UT.
 
mer om animationer

 



 
Det finns flera sätt att få bilder på en HTML-sida att "röra på sig". Man kan använda t ex animerade giffar, javascript-animationer eller java-applets.
 
Precis som med vanliga stillbilder så fungerar inget av de här alternativen i alla webbläsare. Både Java och JavaScript (som alltså inte är samma sak) kan dessutom sättas ur funktion genom att man tar bort markeringen i rutorna Enable Java resp Enable JavaScript som man i t ex Netscape 4, hittar under menyradens Edit/ Preferences/ Advanced...
 
Exemplet ovan är en javascript-animation. För att göra en sådan behöver man förutom ett ritprogram ingenting annat än t ex Notepad (Anteckningar) och förstås en webbläsare att beskåda resultatet i. För närvarande är det väl bara Netscape 3.0 (och senare) och Microsoft Internet Explorer 4.0 som man kan göra det i.
 
För att göra en animerad gif måste man ha ett program där man sätter ihop de separata bildfilerna till en fil och bestämmer med vilka intervall de olika bilderna ska visas. Sådana program finns som shareware ute på nätet.

 

 
EN JAVASCRIPT-ANIMATION
 
I det här exemplet har jag använt fem bilder av en etta i varierande storlek. JavaScript-koden ska alltså se till att bilderna laddas (om det är en webbläsare där det här fungerar) och visas i rätt ordning.

 
animation 2
 
STARTA!
 
Den här koden kan man måla, kopiera och klistra in på HTML-sidan i princip som den är. En ändring måste man dock göra. Här följer den:
 
1 Ersätt first.gif, second.gif etc med namnen på de bildfiler du tänker använda. Använd bilder som alla har samma storlek.
 
Den första delen av koden - den som är placerad mellan SCRIPT-taggar - klistras in någonstans mellan HEAD-taggarna.
 
<SCRIPT LANGUAGE="JavaScript"
      TYPE="text/javascript">
<!--
if(document.images)//
{//
     bild = new Array()//
     bild[0]= new Image()//
     bild[1]= new Image()//
     bild[2]= new Image()//
     bild[3]= new Image()//
     bild[4]= new Image()//
      
     bild[0].src= "first.gif"//
     bild[1].src= "second.gif"//
     bild[2].src= "third.gif"//
     bild[3].src= "fourth.gif"//
     bild[4].src= "fifth.gif"//
}//
bildnummer=0//
varv=0//
animanropad=0//
function test2()//
{//
 if(document.images)//
     {//
      if(animanropad == 0)//
     {//
     iljanim2()//
     animanropad = 1//
     }//
     }//
}//
function iljanim2()//
{//
     iljtimer2 = setTimeout("iljanim2()",200)//
     document.iljbild2.src = bild[bildnummer].src//
     bildnummer++//
     if(bildnummer==bild.length)//
     {//
     bildnummer=0//
     varv++//
     }//
     if (varv==3)//
     {//
     clearTimeout(iljtimer2)//
     varv=0//
     animanropad = 0//
     }//
}//
//-->
</SCRIPT>
 
<A HREF="javascript:test2()">STARTA!</A>
<IMG SRC="first.gif" NAME="iljbild2">

 
 Glöm inte att ange bildens bredd och höjd med WIDTH- och HEIGHT-taggarna. (Man kan förstås använda även andra biltaggarna som t ex ALT.)
 
Om man vill att animeringen ska hålla på längre kan man ändra rad 9 räknat bakåt från den avslutande SCRIPT-taggen. Den raden ser ut så här:
if (varv==3)
och reglerar hur många gånger bildsviten visas. Om man ersätter 3 med t ex 12 så kommer bildsviten alltså att visas tolv gånger i stället för som nu tre.
 
Det finns flera sätt att få animeringen att starta "av sig själv" när sidan laddas. I stället för att använda "STARTA-länken" kan man skriva t ex så här:
 
 <BODY ONLOAD="test2()">
 
Kod med mer detaljerade förklaringar finns under rubriken JAVASCRIPT, t ex exempel 18.
 

Sidan gjordes av
 

 
ilj@flowsim.se
 

Senast ändrad 22 mars 2004.
 

Den här sidan hör hemma i ett ramsystem hos :
http://www.flowsim.se
Bilder på hemsidan