Come modificare il pulsante al passaggio del mouse

April 22

Come modificare il pulsante al passaggio del mouse


È possibile animare testo, immagini e pulsanti sulla vostra pagina Web con l'evento MouseOver. Esso permette di manipolare il codice HTML in base alle azioni di un utente. MouseOver lavora mano nella mano con l'evento mouseout. MouseOver funziona quando il mouse passa sopra un oggetto, mentre mouseOut funziona quando l'oggetto non è più selezionato. È possibile utilizzare MouseOver per modificare il testo e il colore dei pulsanti con poche righe di JavaScript.

istruzione

1 Avviare un editor di testo, come Blocco note, TextPad o EditPad. Selezionare "File" e "Apri" dal menu e fare doppio clic sul file HTML che si desidera modificare.

2 Scorrere fino al tag <body> del file, in cui il pulsante va.

3 Inserire il seguente codice per modificare il testo del pulsante con il mouse:

<Input type = valore "pulsante" = "Clicca per Change Me" onmouseover = "this.value = 'On'" onmouseout = " 'Off' This.Value =" />

4 Sostituire "Clicca per cambiare Me" con il testo originale, che visualizza prima della MouseOver. Sostituire "On" con il testo che viene visualizzato quando si tira sopra il pulsante. Sostituire "Off" con il testo che visualizza quando il mouse rotola fuori il pulsante.

5 Inserire il seguente codice per modificare il colore del pulsante con il mouse. Il colore originale del pulsante è rosso.

<Input type = valore "pulsante" = "Cambia colore" style = "background-color: red;"

onmouseover = "this.style.backgroundColor = 'blu'"

onmouseout = "this.style.backgroundColor = 'giallo'" />

6 Sostituire "rosso" con il colore originale del pulsante prima della MouseOver. Sostituire "blu" con il colore che viene visualizzato quando si tira sopra il pulsante. Sostituire "gialla" con il colore che viene visualizzato quando il mouse rotola fuori il pulsante.