©ilj@flowsim.se
JavaScript på svenska 67
JavaScript onmouseover & onmouseout
liknande exempel:
> bildväxling när man klickar på bilderna
> välj bild i rullgardinsmeny
> fler exempel




för muspekaren över bilderna
kod och förklaringar längre ner





 
När muspekaren befinner sig över bilden (onmouseover) visas en textbild, när muspekaren lämnar bilden (onmouseout) visas ett foto. Så här ser koden ut:
 

<SCRIPT LANGUAGE="
JavaScript"
     TYPE="
text/javascript">
<!--

if(document.images)
{
bild=new Array()
bild[0]=new Image()
bild[1]=new Image()
bild[2]=new Image()
bild[3]=new Image()
bild[4]=new Image()
bild[5]=new Image()
bild[6]=new Image()
bild[7]=new Image()
//
fortsätt ev med fler bilder
bild[0].src="första textbildfilen"
bild[1].src="första bildfilen"
bild[2].src="andra textbildfilen"
bild[3].src="andra bildfilen"
bild[4].src="tredje textbildfilen"
bild[5].src="tredje bildfilen"
bild[6].src="fjärde textbildfilen"
bild[7].src="fjärde bildfilen"
//
fortsätt ev med fler bilder
visad=0
}

function iljbyte()
{
if(document.images)
{
document.iljswitch.src=bild[visad].src
visad++
if(visad==bild.length){visad=0}
}
}
//
-->
</SCRIPT>
<A HREF="#"
ONMOUSEOVER="
iljbyte();return false">
ONMOUSEOUT="
iljbyte();return false">
<IMG SRC="
startbildfilens namn"
NAME="
iljswitch"
BORDER="
0"
WIDTH="
bredd i pixel"
HEIGHT="
höjd i pixel"></A>
 

 
ÄNDRINGAR SOM MÅSTE GÖRAS?
 
Fyll i bildfilernas namn. Dvs ersätt
första textbildfilen, första bildfilen etc med namnen på de bildfiler du tänker använda. Om bildfilerna ligger i samma katalog som HTML-filen räcker det med själva filnamnet, t ex minbild.gif.
Om man vill använda flera bilder fortsätter man listan med
bild[8], bild[9] etc. Varje bild man tänker använda kräver två rader kod, så om man som bild nummer 8 vill visa en bild som heter autoportait.jpg måste man lägga till två rader som ska se ut så här:
 
bild[8]=new Image()
bild[8].src="autoportait.jpg"

 
Om man tänker använda färre bilder tar man bort två rader kod för varje bild som inte ska vara med; ta alltså bort de två rader som börjar med
bild[7], därefter med de två rader som börjar med bild[6] osv. I stället för att ta bort raderna kan man förstås "kommentera ut" dem. Det gör man genom att placera två snedstreck längst till vänster på raden. Så här:
 
//bild[7]=new Image()
//bild[7].src="pict.jpg"

 
Tänk på att alla bilderna måste vara av samma storlek i pixel!
 
I IMG-taggen måste man fylla i bildernas bredd (WIDTH) och höjd (HEIGHT) i pixel och också namnet på den bildfil som ska visas när sidan laddas.
Om man vill ha en ram runt bilderna kan man ändra siffran efter BORDER; en tia istället för nollan skapar en ram som är 10 pixlar bred. Ramens färg blir densamma som länkarnas färg.

 

Sidan gjordes av
 
ilj
 
ilj@flowsim.se
 

 
Senast ändrad 1 augusti 1999.
 
Den här sidan hör hemma i ett ramsystem
hos:
www.flowsim.se
JavaScript på svenska