Wkuno

Hvordan lage en javascript image rollover

JavaScript er den mest populære lettvekts skriptspråk som fungerer i de store nettlesere som Internet Explorer, Chrome, Safari, Firefox og Opera. Det er også enkelt å bruke for å bygge en dynamisk og interaktivt nettsted. En av de nyttige funksjoner er image rollover som endrer et bilde inn i et annet bilde når en mus svever over det opprinnelige bildet. Da det nye bildet vil endre tilbake til den opprinnelige når musen beveger seg bort. Denne artikkelen vil vise deg hvordan du gjør nettopp det steg for steg, og derfor er å vite noen grunnleggende HTML og JavaScript kreves.

Trinn

Hvordan lage en javascript image rollover. Forbered to bilder for rollover effekt.
Hvordan lage en javascript image rollover. Forbered to bilder for rollover effekt.
  1. 1
    Forbered to bilder for rollover effekt. Velg to forskjellige bilder for å lage en rollover bilde og lagre dem i samme mappe hvor du vil lagre HTML-fil som viser en rollover image.
  3. 2
    Åpne en teksteditor av ditt valg. Dreamweaver vil bli brukt som tekst editor i denne artikkelen. Ellers, hvis din tekst editor er tom når du åpner den, må du skrive inn HTML-elementer for å bygge en nettside.
  4. 3
    Finn <head> </ head> delen. JavaScript-kode vil bli satt inn i <head> </ head>-koden. To JavaScript-funksjoner vil bli opprettet for å endre bilder. De to funksjonene er oppkalt MouseRollover og mouseout i koden under. Bildets src eiendommen vil bli brukt til å endre bildets kilde når disse to funksjonene kalles.
  5. 4
    Kopier følgende javascript-kode: 
      <Script language = "javascript">  funksjon MouseRollover (MyImage) {  MyImage src = "MyPicture2.jpg".;  }  funksjon mouseout (MyImage) {  MyImage src = "MyPicture1.jpg".;  }  </ Script>
  6. 5
    Lim inn javascript-kode i "trinn 4" på din tekst editor. Den MyPicture2.jpg i funksjonen MouseRollover bør erstattes av din rollover image navn og MyPicture1.jpg i funksjonen kalles mouseout bør erstattes av den opprinnelige bildets navn.
  7. 6
    Finn <body> </ body>-delen. Bildet tag <image src="RmlsZU5hbWU=" Alt="Title" boarder="0px" width="650px" height="550px"/> vil bli brukt for å vise rollover image. I dette eksemplet er den alt = "Title" som refererer til bildet tittelens navn utelatt.
  8. 7
    Kopier følgende kode:

  9. 8
    Lim inn koden i «Trinn 7" til <body> </ body> delen. OnMouseOver eiendommen er lagt inne i bildet tag ovenfor og vil bli tildelt kaller JavaScript-funksjonen ImageRollover å endre det opprinnelige bildet til et nytt rollover image. Bytt MyPicture1.jpg med originalbildet navn. Videre er en annen egenskap kalt onMouseOut tilsettes for å endre bildet tilbake til sin opprinnelige når du beveger musen vekk fra rollover image.
  10. 9
    Gjennomgå hele koden. Koden din bør ligne koden under. Du kan spille rundt med kode fra dette eksemplet og se hvordan ting endrer seg. 
      <DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN"    "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <Html xmlns = "http://www.w3.org/1999/xhtml">  <Head>  <Meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />  <Title> Test en Javascript Bilde Rollover av Boolanchai Wells </ title>    <Script language = "javascript">  funksjon MouseRollover (MyImage) {  MyImage.src = "MyPicture2.jpg";  }    funksjon mouseout (MyImage) {  MyImage.src = "MyPicture1.jpg";  }  </ Script>    </ Head>    <Body>    <Div align = "center">    <- The rollover bilde viser her -.>  <Img src = "MyPicture1.jpg" boarder = "0px" width = "650px" height = "550px"  onMouseOver = "MouseRollover (dette)"  onMouseOut = "mouseout (dette)" />    </ Div>    </ Body>  </ Html>
  11. 10
    Klikk på "File" og velg "lagre".
  12. 11
    Skriv inn et navn for å lagre HTML-dokumentet. Dokumentet skal lagres som en HTML-fil type.
  13. 12
    Klikk på "lagre"-knappen. "
  14. 13
    Forhåndsvise den ferdige nettsiden. Klikk på "File" og deretter gå til "Forhåndsvisning i leser." Klikk på "Firefox" eller din foretrukne nettleser.

Tips

  • Pass på å sette den lagrede HTML-filen på samme sted hvor to bildene er.
  • Lagre HTML-dokumentet oftere under arbeidet.
  • Et annet alternativ til Trinn 13 (Preview det ferdige web side.), Kan du klikke nettleseren ikonet i mappen der du holde arbeidet for å vise nettsiden.

Ting du trenger

  • en datamaskin
  • hvilken som helst tekst editor program
  • en nettleser
  • to forskjellige bilder