Nwlapcug.com


Pulsanti di JavaScript Tutorial

Pulsanti di JavaScript Tutorial


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

Istruzioni

Istruzioni

1

Creare tre immagini. Utilizzare un programma di software editor di foto per fare questo e salvare un'immagine come normal.jpg, come over.jpg e uno come down. jpg. Codice JavaScript vi mostrerà l'immagine normal.jpg Quando il cursore del mouse non è sopra l'immagine. Quando il cursore si trova sopra l'immagine, codice JavaScript visualizzerà l'immagine over.jpg. Quando si fa clic sull'immagine, verrà visualizzato down. jpg. Quando non si è premendo il pulsante sinistro del mouse sull'immagine, ma il cursore del mouse è ancora sull'immagine, si visualizzerà l'immagine di over.jpg.

2

Salvare le tre immagini nella directory delle immagini sul server. Assicurarsi che la directory di immagini e la pagina web o una pagina di hypertext markup language (HTML) siano nella stessa directory.

3

Aggiungere un tag HTML < img > entro i tag < body > nella pagina web. Il tag è:

< img id = "jsButtonExample" altezza = "60" width = "150" alt = "Esperimento JS pulsante" / >

4

Creare un gestore di evento o funzione (entro i tag < body > della pagina web) per < img > attributi di tag evento. Gli attributi dell'evento onmousedown, onmouseout, onmouseover e onmouseup. La funzione modifica la proprietà src del tag < img > basato sulle occorrenze di uno qualsiasi di questi quattro eventi. Utilizzare il metodo document.getElementById() per accedere al tag < img >:

< script language = "javascript" >

function changeImage( image ) {

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

return true;

}

< / script >

5

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

< img id = "jsButtonExample" altezza = "60" width = "150" alt = "Esperimento JS pulsante" onMouseDown = "return changeImage('images/down.jpg');" onMouseUp = "restituire changeImage('images/over.jpg');" onMouseOut = "restituire changeImage('images/normal.jpg');" onMouseOver = "restituire changeImage('images/over.jpg');" / >

6

Salvare la pagina sul server.

7

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

Considerazione le prestazioni

8

Memorizzare nella cache le immagini. Il codice precedente ha un problema di prestazioni, come si cerca di recuperare le immagini dal server ogni volta che si passa le immagini. Nell'esempio di codice seguente 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 corpo < > e < script > Tag della pagina da memorizzare nella cache le immagini:

normal = new Image(100,60);

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

over = new Image(100,60);

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

down = new Image(100,60);

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

Modificare il gestore di eventi changeImage. Il codice è:

function changeImage( image ) {

switch (image) {

case 'd':

//left mouse button is pressed

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

break;

case 'n':

//mouse is not on the image

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

break;

case 'o':

//mouse is over the image

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

break;

}

return true;

}10

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

< img id = "jsButtonExample" height = "60" width = "100" border = "none" alt = "Esperimento JS pulsante" onmousedown = "return changeImage('d')" onmouseup = "return changeImage('o')" onmouseout = "return changeImage('n')" onmouseover = "restituire changeImage('o')" / >

11

Salvare la pagina.

12

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

Consigli & Avvertenze

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