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.