JavaScript på svenska - onMouseOver

© ilj ilj@flowsim.se
JavaScript på svenska 12a
JavaScript dynamic images/ onMouseOver & onMouseOut
för muspekaren över den svarta bilden
liknande exempel bl.a.
>>> onmouseover

kod & förklaringar längre ner

Två (eller tre) bilder som är lika breda och lika höga behövs. I mitt exempel visas en svart bild när muspekaren inte befinner sig över bilden (när en JavaScript onMouseOut ägt rum) och en bild av ett par kattögon när muspekaren befinner sig över bilden (när en JavaScript onMouseOver ägt rum)

Placera en bild på sidan med hjälp av följande HTML (glöm inte att byta ut min mailadress!).

<A HREF = "mailto:ilj@flowsim.se"
      onMouseOver = "iljswitch(1)"¹
      onMouseOut = "iljswitch(0)">²
<IMG NAME = "switch1"³
      SRC = "bildfil"
      WIDTH = "pixel"
      HEIGHT = "pixel"
      BORDER = "0"></A>

Fyll i bildens bredd och höjd (dvs ersätt pixel med siffror), byt ut bildfil mot namnet på den bildfil du tänker använda och ta bort alla fotnoter.

1 när muspekaren förs in över bilden (onMouseOver) anropas en funktion som här fått namnet iljswitch; inom parentesen finns argumentet 1. iljswitch(1) talar om för javascriptet vilken bild som ska visas. Det fungerar så att siffran 1 kommer in i funktionen som nummer och den bild som visas blir den som förladdats som bild[1].src (mer om det i fotnoterna till javascript-koden).
2 när muspekaren lämnar bilden (onMouseOut) anropas funktionen iljswitch med argumentet 0 inom parentes, dvs siffran 0 kommer in i funktionen som nummer och den bild som visas blir den som förladdats som bild[0].src
3 ge bilden ett namn; det används av javaskript-koden för att hålla reda på VAR en ny bild ska visas. Om man har flera bilder på en sida måste varje bild ha ett unikt namn.

Placera följande i HEAD-delen (se JavaScript 1):

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

4 här förladdas den bild som ska visas när muspekaren inte befinner sig över länken (onMouseOut) - byt ut bildfil ett mot namnet på den bildfil du använder
5 här förladdas den bild som ska visas när muspekaren befinner sig över länken (onMouseOver) - byt ut bildfil två mot namnet på den bildfil du använder
6 den här raden visar en ny bild på den bild(plats) som fått namnet switch1; vilken bild som visas beror av om det är en mouseover eller en mouseout som ägt rum. Om en mouseover ägt rum ersätts nummer av siffran 1 och den bild som visas blir den som förladdats som bild[1].src

VANLIGA FRÅGOR

Om jag vill byta bilder på flera ställen, hur gör jag då? Hur mycket behöver jag byta ut och hur mycket kan användas för båda bilderna?

Koden i det här exemplet gäller bildväxling på ett ställe på sidan. Om man vill använda fler bilder finns det bättre sätt att skriva på (se t ex exempel 32 eller använd "kodmakaren" (nr 1)).
Om man nu ändå vill använda den här varianten (man får skriva lite mer) så kan man göra så här:

a ge varje bild ett eget namn (fotnot 3), bilden i det här exemplet heter switch1, en andra bild skulle t ex kunna heta switch2
b fyll i lämpliga bildsiffror i parenteserna (fotnoter 1 och 2) och anropa en ny funktion, dvs hitta på ett nytt namn, t ex iljswitch2(3)
Taggen för den andra bilden ser då ut så här:

<A HREF = "mailto:ilj@flowsim.se"
      onMouseOver = "iljswitch2(3)"¹
      onMouseOut = "iljswitch2(2)">²
<IMG NAME = "switch2"³
      SRC = "bildfil"
      WIDTH = "pixel"
      HEIGHT = "pixel"
      BORDER = "0"></A>

c se till så att de nya bilderna förladdas (fotnoter 4 och 5), dvs fortsätt listan med bild[2]=new Image() och bild[2].src="bildfil två" etc
d skriv slutligen in den funktion du anropat enligt punkt b så att sista delen av javascriptkoden ser ut så här:

function iljswitch(nummer)
{
if(document.images)
{
document.switch1.src = bild[nummer].src //⁶
}
}
function iljswitch2(nummer)
{
if(document.images)
{
document.switch2.src = bild[nummer].src //⁶
}
}

Det klumpiga med det här sättet att skriva är alltså att man behöver en funktion till varje bild(plats). I exempel 32 räcker det med en funktion för att byta bilder på hur många bildplatser som helst.

Ist�llet f�r att anv�nda IMG-taggens NAME-attribut f�r att identifiera bildplatsen kan man byta ut raderna

document.switch1.src

mot

document.images[i].src

Om bilden som ska bytas �r den f�rsta p� sidan ska i bytas ut mot 0, om bilden �r sidans andra bild ska i bytas ut mot 1 etc. G�r man p� det h�r s�ttet kan NAME="switch1" plockas bort.