© ilj ilj@flowsim.se
JavaScript onMouseOver och JavaScript onMouseOut
JavaScript på svenska 32

 
 












 
 
 

 
 
 
 
 
 
 
 
 
 

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

<A HREF = "URL"
     ONMOUSEOVER = "
iljswtch('bild0',1)"1
     ONMOUSEOUT = "
iljswtch('bild0',0)">
<IMG SRC = "up.gif"
     NAME = "
bild0"
     BORDER = "0"></A>
 
<A HREF = "URL"
     ONMOUSEOVER = "
iljswtch('bild1',3)"1
     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) //2
{

     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)
//3ä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:
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
images/ onmouseover
ändra bakgrundsfärg
timer
rörlig text i textarea
JavaScript confirm
mer om datum
öppna nytt fönster 1
öppna nytt fönster 2
JavaScript prompt
flytande lager
 
[fler JavaScript-exempel hittar du i menyn i ramen till vänster]

Sidan gjordes av
 
ilj
 
ilj@flowsim.se
 

 
Senast ändrad 10 februari 1998.
 
Den här sidan hör hemma i ett ramsystem
hos:
www.flowsim.se