Javascript Knapper Tutorial

Javascript Knapper Tutorial


Javascript knapper eller mus-over knappene er bilder. Javascript-kode endrer skinn av bildene når en datamaskin musepekeren er over bildene, da flytter markøren fra bildene, eller når du klikker på bildene.

Bruksanvisning

Bruksanvisning

1 Lag tre bilder. Bruk et bilde editor program for å gjøre dette, og lagre ett bilde som normal.jpg, en som over.jpg og en som down.jpg. Javascript-kode for å vise bildet normal.jpg når musepekeren er ikke over bildet. Når markøren er over bildet, vil Javascript-kode vise bildet over.jpg. Når du klikker på bildet, vil down.jpg vises. Når du ikke lenger å trykke på venstre museknapp på bildet, men musepekeren er fortsatt på bildet, vil over.jpg bildet viser.

2 Lagre de tre bildene i bildekatalogen på serveren din. Sørg for at bildekatalogen og Hypertext Markup Language (HTML) side eller nettside er under samme katalog.

3 Legg en HTML <img> -taggen innenfor <body> taggene på nettsiden. Koden er:

<Img id = "jsButtonExample" height = "60" width = "150" alt = "JS Button eksperiment" />

4 Lag en funksjon eller hendelseshåndterer (innenfor <body> kodene på websiden din) for <img> -taggen hendelsen attributter. Hendelses attributter onmousedown, onmouseout, onmouseover og onmouseup. Funksjonen endrer src eiendommen av <img> tag basert på forekomster av noen av disse fire hendelsene. Bruk document.getElementById () metode for å få tilgang til <img> -taggen:

<Script language = "javascript">

function changeImage( image ) {

document.getElementById ( "jsButtonExample") src = image.;

return true;

}

</ Script>

5 Legg hendelse attributter til <img> -taggen. Koden er:

<Img id = "jsButtonExample" height = "60" width = "150" alt = "JS Button eksperiment" onMouseDown = "return changeImage ( 'images / down.jpg');" onMouseUp = "return changeImage ( 'images / over.jpg');" onmouseout = "return changeImage ( 'images / normal.jpg');" onMouseOver = "return changeImage ( 'images / over.jpg');" />

6 Lagre siden på serveren din.

7 Test side. Åpne lagrede siden i en nettleser, og deretter flytter musepekeren over bildene og klikk på bildene for å se om de endres.

ytelse vurderes

8 Cache bildene. Den forrige koden har et ytelsesproblem som den prøver å hente bildene fra serveren hver gang den skifter bildene. Følgende kodeeksempel lagrer bildene i nettleserens cache når brukeren får tilgang til siden for første gang i en økt. Etterpå, siden gjenbruker de allerede lastet bildene. Plasser denne koden i <body> og <script> taggene på siden til cache bildene:

normal = new Image(100,60);

normal.src = "images / normal.jpg";

løpet = new Image (100,60);

over.src = "images / over.jpg";

ned = new Image (100,60);

down.src = "images / down.jpg";

9 Endre changeImage hendelsesbehandling. Koden er:

function changeImage( image ) {

bryteren (bilde) {

case 'd':

// Venstre museknappen trykkes

document.getElementById ( "jsButtonExample") src = down.src.;

gå i stykker;

case 'n':

// Mus er ikke på bildet

document.getElementById ( "jsButtonExample") src = normal.src.;

gå i stykker;

case 'o':

// Musen er over bildet

document.getElementById ( "jsButtonExample") src = over.src.;

gå i stykker;

}

return true;

}

10 Endre <img> -taggen å bruke lagrede bildene. Bruk denne koden:

<Img id = "jsButtonExample" height = "60" width = "100" border = "ingen" alt = "JS Button eksperiment" onmousedown = "return changeImage ( 'd')" onmouseup = "return changeImage ( 'o') "onmouseout =" return changeImage ( 'n') "onmouseover =" return changeImage ( 'o') "/>

11 Lagre siden.

12 Test side. Åpne den lagrede siden i en nettleser, og deretter flytte musepekeren over bildene og klikk på bildene for å se om de endres.

Hint

  • Du kan oppnå tilsvarende effekter ved bruk av Cascading Style Sheet (CSS) pseudo-klasser og HTML <a> koder uten å skrive Javascript-kode.