Pulsanti Javascript Tutorial

November 17

Pulsanti Javascript Tutorial


pulsanti JavaScript o pulsanti del mouse-over sono immagini. codice JavaScript cambia le apparenze delle immagini quando il cursore del mouse del computer è sopra le immagini, quando il cursore si sposta dalle immagini o quando si fa clic sulle immagini.

istruzione

istruzione

1 Creare tre immagini. Utilizzare un programma di photo software editor per fare questo, e salvare un'immagine come normal.jpg, uno come over.jpg e uno come down.jpg. codice JavaScript mostrerà il normal.jpg immagine quando il cursore del mouse non è sopra l'immagine. Quando il cursore è sopra l'immagine, il codice JavaScript visualizzerà l'immagine over.jpg. Quando si fa clic sull'immagine, apparirà down.jpg. Quando non si è più premuto il tasto sinistro del mouse sull'immagine, ma il cursore del mouse è ancora sull'immagine, visualizzerà l'immagine over.jpg.

2 Salvare le tre immagini nella cartella immagini sul server. Assicurarsi che la directory immagini e la pagina Hypertext Markup Language (HTML) o web sono sotto la stessa directory.

3 Aggiungere un tag HTML <img> all'interno dei tag <body> della pagina web. Il tag è:

<Img id = "jsButtonExample" height = larghezza "60" = "150" alt = "button esperimento JS" />

4 Creare un gestore di funzione o evento (all'interno del tag <body> della tua pagina web) per <img> evento tag attributi. Gli attributi di evento sono onMouseDown, onmouseout, onmouseover e onmouseup. La funzione modifica la proprietà src del tag <img> in base alle occorrenze di uno qualsiasi dei questi quattro eventi. Utilizzare il metodo document.getElementById () per accedere al tag <img>:

<Script language = "javascript">

function changeImage( image ) {

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

return true;

}

</ Script>

5 Aggiungere gli attributi di evento al tag <img>. Il codice è:

<Img id = "jsButtonExample" height = larghezza "60" = "150" alt = "esperimento pulsante JS" onMouseDown = "tornare changeImage ( 'images / down.jpg');" onMouseUp = "tornare changeImage ( 'images / over.jpg');" onMouseOut = "tornare changeImage ( 'images / normal.jpg');" onMouseOver = "tornare changeImage ( 'images / over.jpg');" />

6 Salvare la pagina sul server.

7 Testare la pagina. Aprire la pagina salvata in un browser, e quindi spostare il cursore del mouse sopra le immagini e clicca sulle immagini per vedere se non cambiano.

considerazione delle prestazioni

8 Cache delle immagini. Il codice precedente ha un problema di prestazioni in quanto cerca di recuperare le immagini dal server ogni volta che cambia le immagini. Il seguente codice di esempio memorizza le immagini nella cache del browser quando l'utente accede alla pagina per la prima volta in una sessione. In seguito, la pagina riutilizza le immagini già caricate. Inserire questo codice all'interno del tag <body> e <script> tag della pagina per memorizzare nella cache le immagini:

normal = new Image(100,60);

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

sopra = nuova immagine (100,60);

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

giù = nuova immagine (100,60);

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

9 Modificare il gestore di eventi changeImage. Il codice è:

function changeImage( image ) {

interruttore (immagine) {

caso 'd':

// Viene premuto il pulsante sinistro del mouse

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

rompere;

caso 'n':

// Mouse non è sull'immagine

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

rompere;

caso 'o':

// Mouse è sopra l'immagine

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

rompere;

}

return true;

}

10 Modificare il tag <img> per utilizzare le immagini memorizzate nella cache. Utilizzare questo codice:

<Img id = "jsButtonExample" height = larghezza "60" = "100" border = "none" alt = "button esperimento JS" onmousedown = "tornare changeImage ( 'd')" onmouseup = "tornare changeImage ( 'o') "onmouseout =" changeImage tornare ( 'n') "onmouseover =" tornare changeImage ( 'o') "/>

11 Salvare la pagina.

12 Testare la pagina. Aprire la pagina salvata in un browser, quindi spostare il cursore del mouse sopra le immagini e clicca sulle immagini per vedere se non cambiano.

Consigli e avvertenze

  • È possibile ottenere effetti simili che utilizzano il Cascading Style Sheet (CSS) pseudo-classi e tag HTML <a> senza scrivere codice JavaScript.