starta
paus
fortsätt
Och så här ser koden ut:
<SCRIPT LANGUAGE="JavaScript"
TYPE="text/javascript">
<!--
if(document.images)
{
text=new Array()
text[0]= " bildtext ett"
text[1]= " bildtext två"
text[2]= " bildtext tre"
text[3]= " bildtext fyra"
text[4]= " bildtext fem"
text[5]= " bildtext sex"
text[6]= " bildtext sju"
text[7]= " bildtext åtta"
bild = new Array()
for(i=0;i<8;i++) //1
{
bild[i] = new Image()
bild[i].src = "minbild" + i + ".gif" //2
antalbilder=i
}
}
startad=0
iljaater=0
function iljcheck()
{
if(startad==0)
{
startad=1
bildnummer=0
iljtimer4()
}
}
function iljtimer4()
{
if(document.images)
{
iljtimer = setTimeout("iljtimer4()",1000) //3
document.iljtimerform.iljtimerruta.value= bildnummer+1+text[bildnummer] //4
document.iljbild.src=bild[bildnummer].src //5
bildnummer=bildnummer+1
if(bildnummer>antalbilder)
{
stoppit()
}
}
}
function stoppit()
{
if(document.images)
{
clearTimeout(iljtimer)
startad=0
}
}
function iljpause()
{
if((document.images)&&(startad==1))
{
clearTimeout(iljtimer)
iljaater=1
}
}
function iljresume()
{
if(document.images)
{
if(iljaater==1)
{
if(bildnummer<=antalbilder)
{
clearTimeout(iljtimer)
iljaater=0
iljtimer4()
}
}
}
}
//-->
</SCRIPT>
<IMG SRC="minbild1.gif"
WIDTH="pixel"
HEIGHT="pixel"
NAME="iljbild">
<FORM NAME = "iljtimerform">
<INPUT TYPE = "text"
NAME = "iljtimerruta"
SIZE = "15">
</FORM>
<A HREF = "#"
ONCLICK="iljcheck();return false">starta</A>
<A HREF = "#"
ONCLICK="iljpause();return false">paus</A>
<A HREF = "#"
ONCLICK="iljresume();return false">fortsätt</A>
Allt mellan SCRIPT-taggar hör ovanför placeras i HEAD-delen
(se MINIMANUAL 1 lite grunder)
1 siffran
anpassas efter antalet
bilder (antal bilder+1)
2 det blir enkelt att
förladda många bilder om man ger dem namn som t ex
minbild0.gif, minbild1.gif;
det enda som skiljer bilderna åt är alltså siffran
3 siffran (1000 i exemplet)
reglerar hur snabbt bildväxlingen går; enheten är millisekunder så
i exemplet är intervallet 1 sekund
4 den här raden
skriver den aktuella bildens nummer i en textruta som heter
iljtimerruta och som finns på en FORM
som heter iljtimerform vilken i sin tur
finns på det aktuella dokumentet document.
Se till att namnen här är desamma som de namn ruta och form fått
i HTML-koden.
5 den här raden visar bilderna på bildplatsen
som här fått namnet iljbild.
Om man inte vill använda NAME
kan man ta bort
NAME="iljbild" och sedan, i javascriptet, byta ut
raden
document.iljbild.src
mot
document.images[i].src
där i byts ut mot en nolla (0) om den IMG-tagg
där bilderna ska visas är den första på sidan, mot en etta
(1) om IMG-taggen är den andra på sidan etc
Den här koden går att måla, kopiera och klistra in. Vad man måste
ändra i JavaScript-koden är alltså följande:
1 siffran som talar om hur många bilder man använder,
fotnot 1
2 ändra minbild till namnet
på de bilder man använder och ev byta
ut gif, fotnot 2
3 ev siffran som reglerar hur ofta bilderna ska bytas,
fotnot 3
4 den här raden (fotnot 4) visar bildens nummer och bildtext
i textrutan; bildtexterna finns alldeles i början av
JavaScript-koden
Vad man måste ändra i HTML-koden är följande:
1 bildfilens namn efter SRC,
alltså den bild som visas
direkt när sidan laddats
2 ersätta pixel med aktuell bredd och höjd
3 anpassa textrutans storlek som här är 15
Om FORM och textrutor se
HTML: forms/e-postformulär
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
ändra bakgrundsfärg
timer
timer 2
rörlig text i textarea
JavaScript confirm
mer om datum
öppna nytt fönster 1
öppna nytt fönster 2
JavaScript prompt
JavaScript flytande lager
bildvisare med bildtexter
[fler JavaScript-exempel hittar du i menyn i ramen till vänster]
Sidan gjordes av
ilj@flowsim.se
Senast ändrad 21 maj 1998.
Den här sidan hör hemma
i ett ramsystem
hos:
www.flowsim.se
JavaScript på svenska
|