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.