JavaScript onmouseOver - animation och bildbyte

När man placerar bilder på en HTML-sida skapas automatiskt en array där sidans första bild får beteckningen document.images[0], sidans andra bild document.images[1] osv.

Använder man kod som säger att något ska hända på document.images[0] så kommer detta något alltså att hända på sidans första bildplats.

I det här exemplet används inga bilder före de bilder som ingår i knapp- och menyrad; det innebär att den första KNAPPEN är document.images[0], den andra KNAPPEN document.images[2] etc. Den första TEXTBILDEN är document.images[1], den andra TEXTBILDEN är document.images[3] etc.

Alla KNAPPBILDERS platsbeteckning är alltså jämt delbar med 2; TEXTBILDERNAS platsbeteckning är inte jämt delbar med 2. Följande kod använder detta faktum för att skilja bilderna åt. Om man alltså använder den här koden och senare t ex lägger in en rubrikbild FÖRE knapparna så måste man anpassa koden annars kommer den nya första bilden att bytas ut mot (i det här exemplet) en animerad knapp osv.

Så här ser koden för sidans första bildpar - dvs första knappbilden och första textbilden - ut:

<A HREF = "mailto:namn@adress.se¹"
     ONMOUSEOVER = "iljswtch(0,2)²"
     ONMOUSEOUT = "stoppit(0,1)³">
<IMG WIDTH = "100"
     HEIGHT = "22"
     SRC = "KNAPP_UPPE_BILD⁴"
     BORDER = "0⁵"></A>

<A HREF = "mailto:namn@adress.se"
     ONMOUSEOVER = "iljswtch(1,4)"
     ONMOUSEOUT = "stoppit(1,3)">
<IMG WIDTH = "140"
     HEIGHT = "22"
     SRC = "SHAREWARE_BILD"
     BORDER = "0"></A><BR>

När man för muspekaren över en bild - knapp- eller textbild - anropas alltså funktionen iljswtch() och när muspekaren lämnar en bild anropas stoppit(). Siffrorna inom parentes håller reda på VAR något ska hända och VILKEN BILD som ska visas - mer om det i fotnoterna.

Om den webbläsare som används klarar av att växla bilder så laddas bilderna (använder man många bilder kan man använda en loop - se JavaScript 16 images/onChange)
Placera koden mellan SCRIPT -taggar i HEAD -delen (se MINIMANUAL 1 lite grunder).

j=1
varv=0
if(document.images)
{
     iljbild = new Array()
     iljbild[1] = new Image()
     iljbild[2] = new Image()
     iljbild[3] = new Image()
     iljbild[4] = new Image()
     iljbild[5] = new Image()
     iljbild[6] = new Image()
     //etc
     iljbild[1].src = "KNAPP_UPPE_BILD"
     iljbild[2].src = "KNAPP_NERE_BILD"
     iljbild[3].src = "bildfil TEXT 1"
     iljbild[4].src = "bildfil TEXT 1"
     iljbild[5].src = "bildfil TEXT 2"
     iljbild[6].src = "bildfil TEXT 2"
     //etc
}

function iljswtch(platsindex,bildnummer) //⁶
{
if(document.images) //⁷
     {
     if(platsindex%2!=0) //⁸
      {
      document.images[platsindex].src = iljbild[bildnummer].src //⁹
      }
     if(platsindex%2==0) //¹¹
     {
     animindex=platsindex //¹²
      }
     if(platsindex%2!=0) //¹³
     {
     animindex=platsindex-1 //¹⁴
     }
     iljanimate() //¹⁶
     }
}
function iljanimate()
{
     document.images[animindex].src=iljbild[j].src //¹⁷
     iljtimer = setTimeout("iljanimate()",75) //¹⁸
     j++ //¹⁹
     if(j==3) //²⁰
     {
     j=1 //²¹
     varv++
     }
     if(varv==100)
     {
     stoppit()
     }
}
function stoppit(outfrom,outbild) //²²
{
if(document.images)
     {
     clearTimeout(iljtimer) //²³
     document.images[animindex].src=iljbild[1].src //²⁴
     if(outfrom%2!=0) //²⁵
      {
      document.images[outfrom].src=iljbild[outbild].src //²⁶
      }
     varv=0
     }
}

1 URL här

2 när muspekaren förs över sidans första bild anropas funktionen iljswtch (platsindex,bildnummer) med argumenten 0 och 2 inom parentes; 0 går in i funktionen som platsindex och talar alltså om på vilket ställe något ska hända, 2 går in som bildnummer och talar om vilken bild som ska visas

3 när muspekaren lämnar en bild anropas funktionen stoppit() som stoppar animeringen och - när det behövs - ser till att rätt textbild visas.

4 den bild som ska visas innan någon mouseover ägt rum

5 nollan tar bort den ram som klickbara bilder annars får

6 första siffran inom parentes vid anropet går in som platsindex, den andra som bildnummer

7 ingenting kommer att hända om inte den webbläsare som används klarar av att växla bilder

8 den här raden kan läsas "om platsindex INTE är jämt delbart med 2" (i det här exemplet innebär det att det är en TEXTBILD muspekaren hamnat över) så ska nästa rads kod utföras och vad den gör är...

9 att byta TEXTBILD - i exemplet visas en textbild med röd pil i stället för svart

Animationen ska sedan startas efter att man bestämt VAR den ska äga rum; variablen animindex ska hålla reda på det och den sätter man som följer...

11 om platsindex är jämt delbart med 2 så har muspekaren hamnat över en KNAPP och det är just den knappen som ska börja röra sig, alltså...

12 är animindex lika med platsindex

13 om platsindex däremot inte är jämt delbart med 2 så har muspekaren hamnat över en TEXTBILD och där ska ingen animation äga rum; däremot ska den knapp som ligger till vänster om TEXTBILDEN och som har ett platsindex som är ett steg lägre än TEXTBILDENS, röra sig, alltså

14 är animindex lika med platsindex-1

16 funktionen iljanimate() anropas

17 den här raden byter bild på den plats som bestäms av animindex; vilken bild som visas bestäms av j. I exemplet används två bilder - iljbild[1] och iljbild[2]; när j är lika med 1 visas alltså iljbild[1] etc

18 funktionen anropar sig själv var 75/1000 sekund och varje gång den gör det så...

19 räknas j upp med 1 och ...

20 när sista bilden i animationscykeln visats - använder man fler bilder till animationen måste man förstås ändra siffran - så ...

21 sätts j tillbaka så att första bilden visas

22 funktion stoppit() anropas när muspekaren lämnar en bild; funktionen stoppar animationen och ser till att grundbilderna visas på samtliga platser

23 timern/animationen stoppas

24 den ursprungliga bilden visas på animeringsplatsen

25 om den bild som muspekaren lämnat är en TEXTBILD så ...

26 visas åter den ursprungliga TEXTBILDEN här

Fler JavaScript-exempel: