Hvordan erstatte et bilde med en annen på Roll med Javascript

En Javascript image roll effekten er ideell for å holde informasjon skjult til leseren ber om det - for eksempel for å skjule svaret på et spørsmål til leseren beveger seg museknappen over det - eller for å vise før-og-etter-sekvenser i en ett bilde - for eksempel for å vise en region før en flom oppstår, og deretter invitere leseren til å sveve over bildet for å se den samme regionen etter en flom oppstår. Å få ett bilde for å erstatte en annen på en roll bruker Javascript er en enkel to stegs prosess.

Bruksanvisning

Plasser Javascript-kode i HTML <head> området

1 Åpne HTML-filen som tilsvarer den siden der du vil sette inn Javascript roll bilde effekt og finne "<head>" tag. Den "<head>" tag bør plasseres nær toppen av HTML-filen.

2 Sett inn følgende kode i HTML-filen umiddelbart etter "<head>" tag: <script type = "text / javascript">. Dette kodesignaler til nettleseren at det som følger er et stykke Javascript-kode.

3 Skriv inn følgende kode under "<script type =" text / javascript ">" header: function mouse (). Trykk "Enter" eller "Return" for å starte en ny linje.

4 Sett inn følgende kode: {document.getElementById ( "image") src = "secondImage.jpg".}. Erstatt "secondImage.jpg" med filnavnet for bildet som skal erstatte den opprinnelige bildet når leseren beveger seg musepekeren over den.

5 Skriv inn følgende kode på en ny linje: function mouseout (). Trykk "Enter" eller "Return" for å starte en ny linje.

6 Sett inn følgende kode: {document.getElementById ( "image") src = "initialImage.jpg".}. Erstatt "initialImage.jpg" med filnavnet for det opprinnelige bildet som skal vises før leseren beveger seg musepekeren over bildet, og som vil dukke opp etter at leseren fjerner hans musepekeren fra på toppen av bildet.

7 Skriv "</ script>" på en ny linje for å avslutte denne delen av Javascript-kode.

Plasser Javascript-kode i HTML <body> Område

8 Finn det stedet der du vil sette inn Javascript roll kode innenfor "<body>" tag i HTML-filen.

9 Sett inn følgende kode inn i HTML-filen: <img border = "0" id = "image" onmouseover = "mouse ()" onmouseout = "mouseout ()" />.

10 Bytt ut "initialImage.jpg" tekst med filnavnet for bildet du ønsker å ha vist før leseren beveger seg musepekeren over bildet.

11 Lagre HTML-dokument og teste den ved å åpne den i en nettleser for å se hvordan det vil se ut til leserne tilgang til det via Internett.