Hvor å Endre Meny bilder på Mouseover i JavaScript

JavaScript er getElementById ( )-metoden lar programmerere inspisere og modifisere den indre rørsystemet på en webside . Denne metoden har tilgang til programmeringsgrensesnitt av en nettside kalt Document Object Model, eller DOM . Med getElementById ( ) , kan programmereren endre de fleste HTML ( HyperText Markup Language) tag styling informasjon - inkludert bakgrunnsbilder. Den JavaScript hendelsen funksjoner onMouseOver () og onMouseOut ( ) reagerer på bevegelse av musen over HTML-elementer ved å utløse gjennomføringen av JavaScript uttalelser. HTML-kodene skal være merket med en unik ID slik at getElementById ( )-metoden kan finne og endre dem . Du trenger
tekst editor
To samme størrelse bakgrunnsbilder , GIF, PNG eller JPG
Vis flere instruksjoner
en

Start tekst editor som kom med datamaskinen.
2

Skriv inn følgende kode i tekst editor. Erstatte bildet navnene " image1.jpg " og " bilde2.jpg " med navn og format din bakgrunn bildefiler . Juster bildestørrelser i " mydiv " Cascading Style Sheet også.

< Style type = "text /css "> < -

mydiv {

background- image! . : type = "text /javascript " >

funksjon changeimage ( linknumber )

{

Div. changeimageback ( linknumber )

{

Div. id = " mydiv1 " class = " mydiv " onMouseOver = " changeimage ( '1 '); " onMouseOut = " changeimageback ( '1 ') "> Link 1 < /a > < /div >

Link to < /a > < /div >

< div id = " mydiv3 " class = " mydiv " onMouseOver = " changeimage ( '3 ' ); " onMouseOut = " changeimageback ( '3 ' ) "> Link 3 < /a > < /div >

< div id = " mydiv4 "class = " mydiv " onMouseOver = " changeimage ( '4 '); " onMouseOut =" changeimageback ( '4' ) "> Link 4 < /a > < /div >

< /body >

< /html >
3

Klikk på " File", " Lagre". Lagre som " test.html . "
4

Start din nettleser. Klikk på "File ", " Open File ".
5

Finn og åpne filen " test.html " du nettopp opprettet .
6

Flytt musepekeren over koblinger for å teste bakgrunnsbildet endring .