Il pulsante di input standard HTML è un rettangolo grigio con il testo in esso. Mentre funzionale, la mancanza di caratteristiche di stile associati con un tasto spesso significa che non complimentano il modulo è in. Usando JavaScript, è possibile usare immagini per richiamare l'azione sulle forme posto dei bottoni standard. Inoltre, le immagini possono essere scambiati per mostrare un grafico alternativo quando si fa clic.

istruzione

1 Creare un modulo web aggiungendo il codice del modulo:

<Form action = metodo "nextPage" = "get / post"> </ form>

Impostare l'azione di pagina per andare dopo che il modulo viene inviato. Impostare il metodo per il metodo appropriato per la forma.

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

<Img alt = "Descrizione" id = "Button1" onclick = "">

Questo codice dovrebbe essere tra i tag "Form" si è creato. Sostituire imagePath con la posizione del file di 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 citazioni seguenti l'evento "onClick":

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

Sostituire "Button1" con l'etichetta ID della vostra immagine. Sostituire "nextImagePath" con la posizione del nuovo file immagine per mostrare.

4 Salvare le modifiche e aprire il file in un browser. L'immagine originale viene visualizzata. L'immagine si alternano apparirà quando si fa clic l'immagine originale.

Consigli e avvertenze

• Lo stesso concetto può essere utilizzato per scambiare più immagini creando una funzione JavaScript separato contenente il codice dal punto 3 e chiamare la funzione nell'evento onClick.
• La funzionalità onClick utilizza JavaScript da eseguire. JavaScript è un linguaggio maiuscole e minuscole. Se lo swap non funziona, verificare che i termini siano nel caso corretto.