©copyright ilj ilj@flowsim.se
JavaScript på svenska 74
JavaScript bildspel

>>>fler skript på temat bildväxling & bildvisare
 

 
Varje bild visas i en sekund. Om man klickar på bild(plats)en laddas en ny sida. Vilken sida som laddas beror på vilken bild som visas just när man klickar.
 


 
 
 
 
 

 
Så här kan koden se ut (blå text för koden, svart text för kommentarer):
 
<SCRIPT LANGUAGE = "JavaScript"
      TYPE="text/javascript">
if(document.images)
{
bild=new Array()
sidaattvisa=new Array()
 
//nedan: första bilden m tillhörande sida att visa
//byt ut laenkbild1.gif mot din bildfil
//byt ut sida1.html mot din html-fil
bild[0]=new Image()
bild[0].src="laenkbild1.gif"
sidaattvisa[0]="sida1.html"
 
//nedan: andra bilden m tillhörande sida att visa
//byt ut laenkbild2.gif mot din bildfil
//byt ut sida2.html mot din html-fil
bild[1]=new Image()
bild[1].src="laenkbild2.gif"
sidaattvisa[1]="sida2.html"
 
//nedan: tredje bilden m tillhörande sida att visa
//byt ut laenkbild3.gif mot din bildfil
//byt ut sida3.html mot din html-fil
bild[2]=new Image()
bild[2].src="laenkbild3.gif"
sidaattvisa[2]="sida3.html"
 
//fortsätt ev m fler bilder o sidor att visa
//på samma sätt som ovan
 
//nedan: ändra ev siffra efter
//maxvarv och/eller bytabildhurofta
bildnr=0
doneit=0
maxvarv=4
//hur många gånger varje bild visas
bytabildhurofta=1000
//hur länge varje bild visas
}
 
//nedan: funktionen iljlinkit()
//kollar vilken sida som ska visas

function iljlinkit()
{
if(document.images)
{
for(i=0;i<bild.length;i++)
{
if(document.iljbild.src==bild[i].src)
{
window.location=sidaattvisa[i]
}
}
}
}
function iljbildspel()
{
if(document.images)
{
if(doneit<maxvarv)
{
document.iljbild.src=bild[bildnr].src
bildnr++
if(bildnr==bild.length){bildnr=0;doneit++}
iljtimer=setTimeout("iljbildspel()",bytabildhurofta)
}
}
}
//-->
</SCRIPT>
 
Om bildspelet ska starta automatiskt när sidan laddats klart kan man t ex placera ett anrop i BODY-taggen, så här:
 
<BODY ONLOAD="iljbildspel()">
 
När man klickar på bilden anropas funktionen
iljlinkit() som ser till att rätt sida visas. Anropet kan placeras efter ONCLICK eller efter HREF. Så här kan alltså bild- och länktaggen se ut:
 
<A HREF="javascript:iljlinkit()">
<IMG SRC="../iljbildlink1.gif"
     BORDER="2"
     WIDTH="120"
     HEIGHT="120"
     NAME="
iljbild"
     ALT="bildbeskrivn"></A>
 
 
Istället för att använda IMG NAME kan man använda IMG ID och byta ut kodraden
document.iljbild.src=bild[bildnr].src
mot
document.getElementById('iljbild').src=bild[bildnr].src
 
en linje
 
Sidan gjordes av
 
ilj
 
ilj@flowsim.se
 
en fyrkant
 
Senast ändrad 6 februari 2001.
 
Den här sidan hör hemma i ett ramsystem hos:
www.flowsim.se