Cambiar imágenes

Cambiar una imagen por otra


El segundo ejemplo que nos encontramos en la página de introducción de W3Schools.
Lo que tenemos es dos imágenes exactamente iguales en tamaño y contorno cuya única diferencia es el color. A una, la que está iluminada la hemos llamado bombillaon.gif y a la otra bombillaoff.gif.
Código que hemos escrito:

<h1>JavaScript puede cambiar imágenes</h1> <img id="myImage" onclick="changeImage()" src="bombillaoff.gif" width="100" height="180"> <p>Click en la bombilla para encenderla/apagarla.</p> <script> function changeImage() {     var image = document.getElementById('myImage');     if (image.src.match("on")) {         image.src = "bombillaoff.gif";     } else {         image.src = "bombillaon.gif";     } } </script>

---

El evento onclick también funciona al pulsar sobre una imagen.
La función changeImage() va a cambiar una imagen por otra.
En primer lugar cargamos con src la bombilla apagada.
En la función changeImage() primero declaramos una variable var que llamamos image y que está formada por el objeto que esté marcado con el identificador myImage.
En este caso, la imagen de la bombilla apagada.
Luego establecemos un condicional if en el que buscamos (con match) el fragmento de string que se corresponde con on.
En el caso que lo encuentre (no es el caso inicialmente) la imagen se cambiará a bombillaoff.gif.
En caso contrario (es el que ocurre), la bombilla se cambiará a bombillaon.gif.
Y en el siguiente onclick estamos en la posición contraria.
Así, a cada click, la bombilla cambiará de encendida a apagada o de apagada a encendida.