Nwlapcug.com


Come fare il cambiamento di immagine pulsanti quando il Mouse è cliccato

Come fare il cambiamento di immagine pulsanti quando il Mouse è cliccato


Il pulsante di input standard HTML è un rettangolo grigio con testo in esso. Mentre funzionale, la mancanza di caratteristiche di stile associato a un pulsante spesso significa che esso non complimentarmi con il modulo in che è. Utilizzando JavaScript, è possibile utilizzare immagini per richiamare azione sulle forme invece di pulsanti standard. Inoltre, le immagini possono essere scambiati per mostrare un grafico alternativo quando cliccato.

Istruzioni

1

Creare un modulo web aggiungendo il codice del modulo:

< forma azione = "nextPage" method = "get/post" >< / form >

Impostare l'azione sulla pagina a cui passare dopo il form viene inviato. Impostare il metodo per il metodo appropriato per il modulo.

2

Aggiungere l'immagine da utilizzare come un pulsante al form:

< img alt = "Descrizione" id = "Button1" onClick = "" >

Questo codice deve essere inserito tra i tag di "forma" è stato creato. Sostituire imagePath con il percorso del file immagine. Sostituire "Descrizione" con il testo da visualizzare se l'immagine non può essere caricato.

3

Aggiungere il codice per modificare il file di immagine tra le virgolette dopo l'evento "onClick":

document.getElementById('Button1').src = 'nextImagePath'

Sostituire "Button1" con il tag ID della vostra immagine. Sostituire "nextImagePath" con il percorso del nuovo file immagine per mostrare.

4

Salvare le modifiche e aprire il file in un browser. Verrà visualizzata l'immagine originale. L'immagine alternativa verrà visualizzato quando si fa clic sull'immagine originale.

Consigli & Avvertenze

  • Lo stesso concetto può essere utilizzato per scambiare immagini multiple creando un JavaScript separato funzione contenente il codice dal passaggio 3 e chiamando la funzione nell'evento onClick.
  • La funzionalità di onClick utilizza JavaScript per eseguire. JavaScript è un linguaggio case-sensitive. Se la partizione di swap non funziona, verificare che i termini siano nel caso corretto.