Nwlapcug.com


Come modificare IMG SRC con JavaScript

Come modificare IMG SRC con JavaScript


Se volete vivacizzare la pagina Web con immagini che cambiano al volo, è possibile utilizzare JavaScript per modificare l'origine di un'immagine, contenuta nell'attributo "src" del tag "img". Anche se quasi ogni azione può essere utilizzata per attivare la modifica di un'immagine src, questo tutorial dimostrerà come collegare il cambiamento a un pulsante sulla pagina. Ad esempio, se si voleva mostrare una versione ingrandita di un'immagine invece di una miniatura, è possibile fornire un pulsante che mostra l'immagine completa quando cliccato.

Istruzioni

1

Aprire il file HTML in un editor di testo. Scorrere verso il basso per trovare l'immagine con l'origine che si desidera modificare. In HTML immagini vengono definiti tramite il tag "< img >"; Se l'immagine a cui punta un file chiamato "picture_0.jpg" nella stessa cartella del documento HTML, il tag sarebbe leggere qualcosa di simile "< img src='picture_0.jpg'>". Potrebbe anche includere altri attributi.

2

Poco prima l'attributo "src", aggiungere un attributo "id" per l'immagine e il nome "change_image." Il tag di immagine ora dovrebbe leggere qualcosa di simile a "< img id = 'change_image' src='picture_0.jpg'>"; Se ci sono altri attributi nel tag < img >, come un "alt" o l'attributo "title", aggiungere l'attributo "id" in primo luogo.

3

Creare una nuova riga nel file HTML, subito dopo il tag < img >, collegando un tag < span > funzione "onclick" di JavaScript. Allora avrai bisogno di sapere il percorso per la nuova immagine; Se l'immagine è chiamato "picture_1.jpg" e si trova nella stessa directory come la prima immagine, il codice sarebbe leggere:

< span style = "border: 1px solid black" onclick="document.getElementById('changeimage').src = 'picture_1.jpg'" > Cambia immagine < / span >

4

Salvare il documento HTML, quindi fare doppio clic sul file per aprirlo nel browser Web. Dopo l'immagine, si vedrà un pulsante con etichetta "Cambia immagine". Fare clic su questo per modificare il file di origine dell'immagine il valore fornito nella funzione "onclick".

Consigli & Avvertenze

  • È anche possibile modificare attributo src del < img > come parte di un effetto di rollover, affinché l'immagine cambia quando il mouse vi passa sopra. Per effettuare questa operazione, modificare il tag di immagine per aggiungere "onMouseOver="this.src='picture_1.jpg'"onMouseOut="this.src='picture_0.jpg'"" prima l'attributo "src". Questo codice verrà caricare "picture_1.jpg" quando l'immagine è passa il mouse sopra e cambiare di nuovo a "picture_0.jpg" quando il mouse esce dall'area.