© ilj@flowsim.se
BiLDViSARE MED BiLDTEXTER
JavaScript på svenska 43
JavaScript bildvisare - visar text och bilder


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
      if(document.getElementById)
{document.getElementById('mydiv').innerHTML=bildnummer+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">
<DIV ID = "mydiv">
</DIV><BR>
<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 och tillhörande text på ett lager som heter mydiv Se till att namnet här är detsamma som DIV-taggens ID.
 
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 på lagret, 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 bestämma hur textytan ska se ut, t.ex.
<DIV ID="mydiv" STYLE="color:black;background-color:white">
 
mer om STYLE under huvudrubriken STYLESHEETS
 
 

Sidan gjordes av
 
ilj
 
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