© ilj ilj@flowsim.se
JavaScript på svenska 63
JavaScript onmouseover och onmouseout

- för muspekaren över textlänkarna
- kod & förklaringar längre ned på denna sida
- sidans adress


OM FLYGPLAN!

OM SKALBAGGAR!

OM BILAR!

OM FISKAR!





 
I det här exemplet visas alltså olika bilder
beroende på vilken länk muspekaren förs över;
alla bilder visas på ett och samma ställe.
 
1
Placera en bild på sidan:
 




 
Så här skulle bildtaggen kunna se ut:
 

<IMG SRC= "basbild.gif"
     NAME="
bildplatsen"
     WIDTH = "
99"
     HEIGHT = "95">

 
2
På den här bildplatsen som alltså fått namnet
bildplatsen ska olika bilder visas när muspekaren förs över olika textlänkar.
 
Så här skulle en bild kunna se ut:

 




 
Och så här en annan:
 




 
Bilderna ska visas direkt när muspekaren förs över en länk; man ska alltså inte behöva vänta på att den nya bilden börjar laddas ner (hämtas från servern) först när man för muspekaren över länken.
För att åstadkomma det måste man förladda bilderna, dvs se till så att alla bilder laddas samtidigt med sidan.
Så här kan man göra det:
 

bild=new Array()
bild[0]= new Image()
bild[0].src="basbild.gif"
bild[1]= new Image()
bild[1].src="minbild1.gif"
bild[2]= new Image()
bild[2].src="minbild2.gif"

 
Den här kodbiten förladdar tre bilder, nämligen bildfilerna
basbild.gif
(som ska visas när muspekaren inte befinner sig över någon länk)
samt
minbild1.gif
och
minbild2.gif
(som alltså är två av de nya bilder som ska visas) .
 
De här bilderna laddas samtidigt som sidan i övrigt men de syns inte på sidan förrän man använder kod som plockar fram dem.
 
3
Placera länkarna på sidan. T ex så här:
 

<A HREF="URL här"
ONMOUSEOVER="
iljswtch(1)"
ONMOUSEOUT="
iljswtch(0)">TEXT 1</A>
<A HREF="URL här"
ONMOUSEOVER="
iljswtch(2)"
ONMOUSEOUT="
iljswtch(0)">TEXT 2</A>
 

 
När muspekaren förs över en av länkarna ovan (och en mouseover alltså äger rum) eller när muspekaren lämnar en av länkarna ovan (och en mouseout äger rum) anropas en funktion som här fått namnet
iljswtch().
 
När muspekaren förs in över den första länken anropas funktionen
iljswtch() med 1 inom parentesen (som argument eller parameter), så här:
 
iljswtch(1)

 
När muspekaren lämnar den första länken anropas funktionen iljswtch() med 0 inom parentesen, så här:
 
iljswtch(0)

 
Siffran inom parentes bestämmer vilken bild som ska visas.
Siffran
0 talar om för funktionen att av de förladdade bilderna är det bild[0] som ska visas.
Siffran
1 talar om för funktionen att det är bild[1] som ska visas.

 
Så här ser funktionen ut (ändra ingenting i den!):
 

function iljswtch(bildnummer)
{
document.bildplatsen.src=bild[bildnummer].src
}
 
Siffran inom parentes kommer in i funktionen som

 
bildnummer

 
Om siffran inom parentes är 0 kommer funktionens enda rad (dvs den rad som visar en ny bild på bildplatsen bildplatsen) alltså att bli
 
document.bildplatsen.src=bild[0].src

 
och den bild som visas är alltså den som förladdats som bild[0].src.
Använd inte den röda raden här ovan i koden. Det enda den skulle göra är att visa en och samma bild (bild[0].src) på bildplatsen.
 
Alla webbläsare klarar inte av att byta bilder; man bör alltså ta reda på vad som gäller i den webbläsare sidan visas i och placera koden i en villkorssats (if-sats).
 
Så här skulle då den färdiga JavaScript-koden kunna se ut:
 

<SCRIPT LANGUAGE="JavaScript"
TYPE="text/javascript">
<!--
if(document.images)
{
bild=new Array()
bild[0]= new Image()
bild[0].src="basbild.gif"
bild[1]= new Image()
bild[1].src="minbild1.gif"
bild[2]= new Image()
bild[2].src="minbild2.gif"
//
ev fler bilder
}
function iljswtch(bildnummer)
{
if(document.images)
{
document.bildplatsen.src=bild[bildnummer].src
}
}
//-->
</SCRIPT>
 
JavaScript-koden placeras bäst mellan HEAD-taggarna; bilden (IMG-taggen) och länkarna placeras mellan BODY-taggarna (se MINIMANUAL 1 lite grunder).
 
De enda ändringar som ska göras i Javascript-koden är alltså att ta bort/ eller lägga till bilder. Varje ny bild ska ha två rader
bild[3]=new Image()
bild[3].src="bildfilen".
 
Övriga ändringar görs efter ONMOUSEOVER och ONMOUSEOUT; det är siffrorna inom parenteserna som bestämmer vilken bild som visas.

 

Sidan
http://www.flowsim.se/picts/iljjava/iljimagl.html
gjordes av
ilj
ilj@flowsim.se
Senast ändrad 9 februari 1999.
Den här sidan hör hemma i ett ramsystem
hos:
www.flowsim.se
JAVASCRiPT