kan man göra samma sak på andra sätt.
|
|
V
Två bilder - en blå cirkel och en vit (osynlig på den vita bakgrunden) - visas på olika platser.
De vita eller genomskinliga bilderna placeras ut på sidan med IMG-taggar. För att bestämma var bilderna ska visas kan man använda till exempel en tabell (TABLE) eller en stilmall.
JavaScript-koden placeras mellan SCRIPT-taggar i HEAD-delen (se MINIMANUAL 1 lite grunder). Så här ser koden ut
if(document.images) //1
{
i = 0 //2 j = 0anropad = 0 //3 bild = new Array()bild[1]= new Image()bild[2]= new Image()bild[1].src= "bildfil (här:blå)"bild[2].src= "bildfil"}
function test()
{
if(document.images) //4 {if(anropad == 0) //5 {iljanim() //6 anropad = 1 //7 }}}
function iljanim()
{
document.images[i].src = bild[1].src //8 if(i>3) //9 {document.images[i-4].src = bild[2].src //10 }iljtimer = setTimeout("iljanim()",250) //11 i++ //12 if(i==27) //13 {i=0 //14 j=j+1}if(j==5) //15 {clearTimeout(iljtimer) //16 }}
1 om sidan ses i en webbläsare som klarar av att växla bilder så uförs koden mellan krullparenteserna, dvs några variabler definieras och bilderna laddas
2 här definieras i som används för att hålla reda på bildplatserna
3 och här definieras anropad som används för att se till så att animationsfunktionen anropas bara EN gång (om man skulle starta animationen genom att t ex klicka på en länk)
4 den här raden kollar om det är OK med bildväxling och om det är så och...
5 om funtionen inte redan startats så...
6 anropas iljanim() och...
7 anropad sätts till 1
8 den första bild man med hjälp av taggen <IMG> har placerat på en sida är document.images[0] , den andra document.images[1] etc. Den här raden visar alltså en blå cirkel först på bildplats document.images[0] , därefter på document.images[1] etc. i räknas upp med 1 varje gång funktionen iljanim() anropas
9 när i blivit större än 3 och alltså fyra blå cirklar syns så...
10 ersätts den blå cirkel som är sist i raden av den vita, osynliga bilden
11 här anropar funktionen iljanim() sig själv var 250/1000 sekund
12 i räknas upp med 1
13 när i antagit värdet av 26 (den här siffran är förstås beroende av hur många bilder man använder mm) så...
14 sätts i till 0 och det hela börjar om igen
15 när j är lika med 5, dvs efter 5 "omstarter", så...
16 stoppas timern
Om man vill att animationen ska starta när sidan laddas kan man placera anropet efter BODY ONLOAD, t ex
<BODY onLoad="test()">.
Fler JavaScript-exempel:
onmouseover image/mouseover variant varannan dag bildväxl/animering välja bild i rullgardinsmeny meddelandefönster datum & tid meddelande onLoad onFocus lastModified image/mouseover onblur klocka history images/ animation images/ onmouseover ändra bakgrundsfärg timer rörlig text i textarea JavaScript confirm mer om datum öppna nytt fönster 1 öppna nytt fönster 2 JavaScript prompt flytande lager[fler JavaScript-exempel hittar du i menyn i ramen till vänster]
Sidan gjordes av
ilj@flowsim.se
Senast ändrad 15 januari 1998.
Den här sidan hör hemma i ett ramsystem
hos:
www.flowsim.se