Wku

Hur man gör en javascript image rollover

JavaScript är det mest populära lätta skriptspråk som fungerar i de vanligaste webbläsarna såsom Internet Explorer, Chrome, Safari, Firefox och Opera. Det är också lätt att använda för att bygga en dynamisk och interaktiv webbplats. En av dess användbara funktioner är bilden rollover som förändrar en bild till en annan bild när musen svävar över den ursprungliga bilden. Sedan den nya bilden kommer att ändra tillbaka till den ursprungliga när musen flyttas bort. Denna artikel kommer att visa dig hur man gör just det steg för steg, och därför är att veta några grundläggande HTML och JavaScript krävs.

Steg

Hur man gör en javascript image rollover. Förbered två bilder för rollover-effekt.
Hur man gör en javascript image rollover. Förbered två bilder för rollover-effekt.
  1. 1
    Förbered två bilder för rollover-effekt. Välj två olika bilder för att göra en rollover bild och spara dem i samma mapp där du sparar din HTML-fil som visar en överrullningsbild.
  3. 2
    Öppna en textredigerare som du väljer. Dreamweaver kommer att användas som textredigeraren i denna artikel. Annars om din textredigerare är tom när du öppnar den, måste du ange HTML-element för att bygga en webbsida.
  4. 3
    Leta <head> </ head> avsnittet. JavaScript-kod infogas i <head> </ head>-taggen. Två JavaScript-funktioner kommer att skapas för att ändra bilderna. De två funktionerna heter MouseRollover och mouseOut i koden nedan. Bildens src fastigheten kommer att användas för att ändra bildens källa när dessa två funktioner kallas.
  5. 4
    Kopiera följande JavaScript-kod: 
      <Script language = "javascript">  funktion MouseRollover (MyImage) {  MyImage src = "MyPicture2.jpg".;  }  funktion mouseOut (MyImage) {  MyImage src = "MyPicture1.jpg".;  }  </ Script>
  6. 5
    Klistra in JavaScript-kod i "steg 4" på din texteditor. Den MyPicture2.jpg i funktionen MouseRollover bör ersättas av din överrullningsbild namn och MyPicture1.jpg i funktionen kallas mouseOut bör ersättas med den ursprungliga bildens namn.
  7. 6
    Leta <body> </ body> avsnitt. Bildtaggen <image src="RmlsZU5hbWU=" Alt="Title" boarder="0px" width="650px" height="550px"/> kommer att tillämpas för att visa den överrullningsbild. I detta exempel är alt = "Titel" som avser bildens titel namn är utelämnat.
  8. 7
    Kopiera följande kod:

  9. 8
    Klistra in koden i "Steg 7" till <body> </ body> avsnitt. OnMouseOver Fastigheten läggs inuti bildtaggen ovan och kommer att tilldelas anropa JavaScript-funktionen ImageRollover att ändra din ursprungliga bilden till en ny överrullningsbild. Ersätt MyPicture1.jpg med din ursprungliga bildens namn. Dessutom är en annan egenskap som kallas onMouseOut tillsätts för att förändra bilden tillbaka till sin ursprungliga när du flyttar musen bort från överrullningsbilden.
  10. 9
    Granska hela koden. Din kod bör se ut ungefär koden nedan. Du kan leka med kod från detta exempel och se hur saker och ting förändras. 
      <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> Testa en Javascript Image Rollover av Boolanchai Wells </ title>    <Script language = "javascript">  funktion MouseRollover (MyImage) {  MyImage.src = "MyPicture2.jpg";  }    funktion mouseOut (MyImage) {  MyImage.src = "MyPicture1.jpg";  }  </ Script>    </ Head>    <Body>    <Div align = "center">    <-! The överrullningsbild visar här -.>  <Img src = "MyPicture1.jpg" boarder = "0px" width = "650px" height = "550px"  onMouseOver = "MouseRollover (this)"  onMouseOut = "mouseOut (this)" />    </ Div>    </ Body>  </ Html>
  11. 10
    Klicka på "File" och välj "spara".
  12. 11
    Ange ett namn för att spara HTML-dokument. Ditt dokument bör sparas som en HTML-fil typ.
  13. 12
    Klicka på "Spara" knappen. "
  14. 13
    Förhandsgranska den färdiga webbsidan. Klicka på "File" och sedan gå till "Förhandsgranska i webbläsaren." Klicka på "Firefox" eller din favorit webbläsare.

Tips

  • Var noga med att sätta din sparade HTML-filen på samma plats där dina två bilderna är.
  • Spara ditt HTML dokument oftare under ditt arbete.
  • Ett annat alternativ till Steg 13 (Förhandsgranska den färdiga webbsidan.), Kan du klicka på din webbläsare ikonen i mappen där du håller ditt arbete för att visa webbsidan.

Saker du behöver

  • en dator
  • valfri textredigerare program
  • en webbläsare
  • två olika bilder