[IMAGE]

 Javascript-malli 2
Kuvien vaihtaminen

Kuvien vaihtamisessa tarvitset samasta kuvasta kaksi eriversiota. Toinen kuvista on se, mikä näkyy oletuksena ja toinen on se, mikä vaihtuu, kun hiiri tulee kuvan päälle. Alla on kuvat joita harjoituksessa käytetään.

rk_etus.gif rk_etusb.gif

<HTML>
<HEAD>
<TITLE>js-malli</TITLE>

</HEAD>
<BODY>

<FORM NAME="testi">
<IMG NAME="kuva1" SRC="rk_etusb.gif" onMouseOver="document.testi.kuva1.src='rk_etus.gif'" onMouseOut =  "document.testi.kuva1.src='rk_etusb.gif'">
</FORM>

</BODY>
</HTML>

Eli kun hiiri tulee kuvan päälle aktivoituu onMouseOver-tapahtuma, jossa sanotaan, että vaihda TämänDokumentin.TestiNimisenLomakkeen.Kuva1NiminenKuva - kuvaksi, joka on määritelty perässä. 
onMouseOver="document.testi.kuva1.src='rk_etus.gif'"
Huomaa, että kuva on sijoitettu lainausmerkkien sisälle
'rk_etus.gif'
ja koko = merkin jälkeinen osa " " merkkien väliin.

onMouseOut-tapahtuma toteutuu taas silloin, kun hiiri viedään pois kuvan päältä. Silloin palautuu alkuperäinen kuva takaisin.

Kuva on sijoitettu lomake-elementtiin, koska muuten Netscape ei osaa käsitellä suoraan nimettyä kuvaa.

Sivu uudessa selainikkunassa