Se si vuole ravvivare la pagina Web con le immagini che cambiano al volo, è possibile utilizzare JavaScript per modificare il sorgente di un'immagine, contenuta nel attributo "src" del tag "img". Anche se quasi ogni azione può essere utilizzato per innescare il cambiamento di un src immagine, questo tutorial dimostrerà come collegare il cambiamento a un pulsante sulla pagina. Ad esempio, se si voleva mostrare una versione più grande di un'immagine invece di una miniatura, si potrebbe fornire un pulsante che mostra l'immagine completa quando si fa clic.

istruzione

1 Aprire il file HTML in un editor di testo semplice. Scorrere verso il basso per trovare l'immagine con la fonte che si desidera modificare. Nelle immagini HTML sono definiti dal tag "<img>"; Se l'immagine ha indicato un file chiamato "picture_0.jpg" nella stessa cartella del documento HTML, il tag dovrebbe leggere qualcosa come "<img src = 'picture_0.jpg'>". Si potrebbe includere anche altri attributi.

2 Poco prima l'attributo "src", aggiungere un attributo "id" per l'immagine e il nome "change_image." Il tag immagine dovrebbe ora leggere qualcosa come "<img 'change_image' id = src = 'picture_0.jpg'>"; se ci sono altri attributi del tag <img>, come un "alt" o l'attributo "title", aggiungere il "id" attributo prima.

3 Creare una nuova riga nel file HTML, direttamente dopo il tag <img>, collegando un tag <span> alla funzione "onclick" di JavaScript. Avrai bisogno di conoscere il percorso per la nuova immagine; Se l'immagine si chiama "picture_1.jpg" e si trova nella stessa directory come la prima immagine, il codice sarebbe il seguente:

<Span style = "border: 1px solid black" onclick = ". Document.getElementById ( 'changeImage') src = 'picture_1.jpg'"> Modifica Immagine </ span>

4 Salvare il documento HTML, quindi fare doppio clic sul file per aprirlo nel browser Web. Dopo che l'immagine, si vedrà un pulsante "Modifica immagine". Clicca su questa opzione per modificare il file di origine dell'immagine per il valore che hai fornito nella funzione "onclick".

Consigli e avvertenze

• È inoltre possibile modificare il <img> s 'attributo src come parte di un effetto rollover, in modo che l'immagine cambia quando si sposta il mouse su di esso. Per fare questo, modificare il tag di immagine per aggiungere "onMouseOver =" this.src = 'picture_1.jpg' "onMouseOut =" this.src = 'picture_0.jpg' "" prima della "attributo src". Questo codice verrà caricato "picture_1.jpg" quando l'immagine viene moused finita, e cambiare di nuovo a "picture_0.jpg" quando il mouse lascia l'area.