JavaScript onMouseOver

Så här kan två IMG-taggar se ut:

<A HREF = "URL"
     ONMOUSEOVER = "iljswtch('bild0',1)"¹
     ONMOUSEOUT = "iljswtch('bild0',0)">
<IMG SRC = "up.gif"
     NAME = "bild0"
     BORDER = "0"></A>

<A HREF = "URL"
     ONMOUSEOVER = "iljswtch('bild1',3)"¹
     ONMOUSEOUT = "iljswtch('bild1',2)">
<IMG SRC = "up.gif"
     NAME = "bild1"
     BORDER = "0"></A>

Ge varje bild ett unikt NAME (här kallas första bilden "bild0", andra "bild1" etc); bildens NAME håller reda på VAR en ny bild ska visas. I parenteserna, efter varje bildnamn, finns en siffra; den håller reda på VILKEN bild som ska visas.

Placera själva skriptet mellan SCRIPT-taggar i HEAD-delen (se MINIMANUAL 1 lite grunder):

if(document.images) //²
{

     iljbild = new Array()
     iljbild[0] = new Image()
     iljbild[1] = new Image()
     iljbild[2] = new Image()
     iljbild[3] = new Image()
     iljbild[0].src = "up1.gif"
     iljbild[1].src = "down1.gif"
     iljbild[2].src = "up2.gif"
     iljbild[3].src = "down2.gif"
}
function iljswtch(bildnamn,bildnummer)
//³ändra inget här!
{
if(document.images)
     {
     document.images[bildnamn].src = iljbild[bildnummer].src
     }
}

1 här anropas funktionen iljswtch(); argumenten inom parentes talar om på vilken plats bildväxling ska äga rum och vilken bild som ska visas på den platsen vid onmouseover resp onmouseout. På den plats som fått namnet (NAME) bild0 ska en bild som man får tag på med hjälp av 1 visas vid onmouseover och en bild som man får tag på med hjälp av 0 visas vid onmouseout. Mer om det i fotnot 2.

2 Om bildväxling är OK ser den här listan till att ladda alla bilder vilkas filnamn man skrivit in. Bilderna laddas samtidigt som resten av sidan.
Den bild som man får tag på med hjälp av 0 är alltså den bild som förladdats som bild[0].src, dvs den fil var namn skrivits in efter bild[0].src.
Använder man flera bilder än i exemplet lägger man bara till
iljbild[4]=new Image()
iljbild[4].src= "ett nytt filnamn"
iljbild[5]=new Image()
iljbild[5].src="ännu ett nytt filnamn" etc

3 första argumentet i anropet vid onmouseover resp onmouseout går alltså in som bildnamn, den andra som bildnummer; från sidans första bild kommer alltså vid mouseover 'bild0' och 1, vilket ger

document.images['bild0'].src = iljbild[1].src

dvs funktionen har fått reda på att på bild(plats)en som fått namnet 'bild0' skall den visa den bild som förladdats som iljbild[1].src.
Obs! Den röda raden här ovanför ska inte finnas med i koden, den är bara med för att visa hur funktionen får informationen om vilken bild som ska visas på vilken plats. Om man använde den raden skulle funktionen bara visa den bestämda bilden iljbild[1].src på en och samma plats nämligen på bildplatsen 'bild0'.

Gör så här:
1 Ta bort alla fotnoter!

2 Ändra ingenting i själva funktionen!

Fortsätt dock den "lista" som förladdar bilderna om du tänker använda flera bilder. Vaje bild kräver två rader. Ytterligare en bildfil som t ex heter minbild.gif förladdas alltså med raderna

iljbild[4]=new Image()
iljbild[4].src="minbild.gif"

3 Lägg till önskat antal IMG-taggar och se till att var och en har fått ett eget namn (som skrivs in efter NAME) och att siffrorna inom parenteserna syftar på rätt bild (står där en 0, så är det iljbild[0].src som kommer att visas på den bildplatsen).

Om man inte vill använda NAME kan man ta bort alla "NAME="bild0", "NAME="bild1" etc och ersätta anropens "bild0", "bild1" etc med en siffra. En nolla (0) syftar på sidans allra första IMG-tagg, en etta (1) på sidans andra IMG-tagg etc.
Så här skulle det kunna se ut vid sidans första IMG-tagg:
ONMOUSEOVER = "iljswtch(0,1)"
ONMOUSEOUT = "iljswtch(0,0)"
Ändra ingenting i funktionen.

Fler JavaScript-exempel: