Alternar entre dos imagenes

oxk4r01 · #1 (**permalink**) 14/01/2015, 06:20

Hola. Tengo dos imagenes una de un bombilla encendida y otra apagada. Quiero cambiar entre una y otra con un click como si fuera un interruptor. He probado con este código pero no funciona. No sé qué es lo que está mal:

Código:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Javascript01</title>
</head>

<body>
<img id="bombilla" onclick="changeImg()" src="off.gif">
<script>
function changeImg() {
var imagen = document.getElementById('bombilla');
if (imagen.src == "on.gif") {
imagen.src = "off.gif";
} else {
imagen.src = "on.gif";
}
}
</script>
</body>

</html>

mauritosuarez · #2 (**permalink**) 14/01/2015, 06:36

Hola oxk4r01, prueba con este código (adaptalo a tus necesidades), te estaba faltanto el llamado a la libreria de javascript para que funcione.

Código HTML:

Ver original<!DOCTYPE html>
<html lang="en">
 
<head>
<meta charset="UTF-8">
<title>Javascript01</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <!-- Te falta llmar a la libreria de java script -->
</head>
 
<body>
<img id="bombilla" onclick="changeImg()" width="80" src="http://previews.123rf.com/images/neyro2008/neyro20081210/neyro2008121000053/15912323-realistic-lit-light-bulb-isolated-on-white-vector-illustration.jpg">
<script>
function changeImg() {
var imagen = document.getElementById('bombilla');
/* luego modificalo con tus imagenes.  */
if (imagen.src == "on.gif") {
imagen.src = "off.gif";
} else {
imagen.src = "http://us.cdn2.123rf.com/168nwm/tr3gi/tr3gi1101/tr3gi110100029/8746356-idea-y-solucion--bombilla-encendida-aislada-sobre-fondo-blanco-foto-de-ordinario-encendido-bombilla-.jpg";
}
}
</script>
</body>
 
</html>

Espero te sirva.

Saludos.

oxk4r01 · #3 (**permalink**) 14/01/2015, 07:14

Lo siento pero tu ejemplo no funciona. La llamada a las librerías de jQuery no entiendo porqué es necesaria. Este script no utiliza jQuery; sólo javaScript.

mauritosuarez · #4 (**permalink**) 14/01/2015, 07:19

Como quieras, a mi me funciono correctamente.

Saludos.

Panino5001 · #5 (**permalink**) 14/01/2015, 08:50

El problema puede ser que el src, al ser interpretado, devuelva la ruta completa de la imagen y no sólo el nombre del archivo. Si, como en tu ejemplo, la imagen está en el mismo directorio, podés usar esto:

Código:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Javascript01</title>
</head>

<body>
<img id="bombilla" onclick="changeImg()" src="off.gif">
<script>
function changeImg() {
	
var imagen = document.getElementById('bombilla');

if (imagen.src.split('/').pop() == "on.gif") {
imagen.src = "off.gif";
} else {
imagen.src = "on.gif";
}
}
</script>
</body>

</html>

Si en cambio están en diferentes directorios (en el mismo también funcionaría), podrías usar esto otro:

Código:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Javascript01</title>
</head>

<body>
<img id="bombilla" onclick="changeImg()" src="off.gif">
<script>
function changeImg() {
	
var imagen = document.getElementById('bombilla');

if (imagen.src.indexOf("on.gif")!=-1 ) {
imagen.src = "off.gif";
} else {
imagen.src = "on.gif";
}
}
</script>
</body>

</html>

mauritosuarez: ¿para qué vas a incluir una librería si luego no la usás en tu código. Te sugiero que no hagas las cosas de manera automática.