Hvordan kan jeg lage en Roll Bilde Hold Synlig?

February 5

Bilde velt som du ser på nettet oppstå når nettleseren bytter ett bilde for ny. Normalt returnerer opprinnelige bildet når musepekeren ikke lenger svever over bildet element. Denne rulleringen effekten fanger oppmerksomheten til Internett-brukere og gir ekstra interaktivitet på nettstedet ditt. Ved hjelp av Javascript, kan du endre effekten og fryse den. Dette vil føre til nytt bilde forbli når markøren beveger seg bort fra bildeelement.

Bruksanvisning

1 Åpne HTML-dokumentet med Notepad eller en HTML-editor.

2 Legg denne koden til <body> -delen av dokumentet:

</a>

Dette skaper en kobling som har et bilde. Erstatt "xyz1.gif" med navnet på et bilde på harddisken. Dette er bildet du vil se når du kommer på websiden. Den "onmouseover" parameter får nettleseren til å utføre "freezeImage" Javascript-funksjonen når du beveger musepekeren over bildet.

3 Legg denne Javascript-kode i <head> -delen av dokumentet:

// Lines 1-2

Var image1Name = "xyz1.gif";

Var image2Name = "xyz2.gif";

// Lines 3-4

Var image1 = new Image ();

Var image2 = new Image ();

// Lines 5-6

image1.src = image1Name;

image2.src = image2Name;

// Lines 7-9

funksjon freezeImage () {

Var imageObject = document.getElementById ( "mainImage");

imageObject.src = image2Name;

}

</ Script>

Linjer 1-2 lagre navnene på din "før" og "etter" bilder i de to variablene vist. Erstatt "xyz1.gif" med navnet på bildet er definert i <body> -delen. Erstatt "xyz2.gif" med navnet på bildet du vil skal vises når en musepekeren beveger seg over lenken.

Linjer 3-6 lage bildeobjekter og initial dem til navnene du definerer i Lines 1-2. Funksjonen på Lines 7-9 erstatter hovedbildet med det andre bildet (image2Name) når roll oppstår.

4 Lagre dokumentet og åpne Windows Utforsker. Finn filen og dobbeltklikk på den. Nettleseren vil åpne og vise websiden. Siden vil vise sammenhengen med det første bildet.

5 Beveg musen over linken. Javascript-funksjonen vil kjøre og føre til at koblingen for å vise det andre bildet. Beveg musen bort fra bildet, og det vil ikke endre lenger.

Hint

Bildet er frosset på plass fordi koden har en "onmouseover" event, men ingen "onmouseout" hendelse, så mange sider som gjør. Dette eksemplet bruker en link som roll element. Du kan skape den samme effekten ved bruk av andre HTML-elementer ved å legge til "onmouseover" kode til sine tag definisjoner i dokumentets <body> -delen.