Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Cambiar entre dos imagenes

JavaScript - Cambiar entre dos imagenes

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

Cambiar entre dos imagenes

Publicado por oxk4r (2 intervenciones) el 14/01/2015 11:19:54
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!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>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
sin imagen de perfil

Cambiar entre dos imagenes

Publicado por andyman (2 intervenciones) el 14/01/2015 16:51:07
es por la condicional direccion src te explico de la siguiente manera:

1
2
3
4
5
6
7
8
9
10
11
12
<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";
}
alert(bombilla.src);
}
</script>

cuando lo ejecutes te aparecera un alert con la verdadera condicional que se debe poner en mi caso me muesta que el src es http://hostingejemplo.com/off.gif
o si lo estas haciendo local aparecera algo asi
file:///C:/users/xxx/xxxx

Espero que te sirva de ayuda, quedo atento...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Cambiar entre dos imagenes

Publicado por oxk4r (2 intervenciones) el 14/01/2015 19:25:46
Hola. En el else, da igual lo que ponga. He probado con las dos imágenes (off.gif y on.gif), pero no funciona de ninguna manera.
Se supone que cada vez que haga click en la imagen esta se debería de cambiar por la otra, pero eso sólo tiene lugar la primera vez que hago click.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 5
Ha disminuido su posición en 29 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Cambiar entre dos imagenes

Publicado por Ismael (10 intervenciones) el 14/01/2015 19:58:48
Hola, si tienes problemas con las rutas prueba comparando con alguna variable de estado, a parte el script lo pondría en el head.
Como indica andyman, cuando compara el src, está comparando la ruta absoluta de la imágen con la imágen y nunca va a ser cierto ya que no coincidirá nunca. Así si funcionaría.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
 
<head>
<meta charset="UTF-8">
<title>Javascript01</title>
<script>
var estado=0;
function changeImg() {
var imagen = document.getElementById('bombilla');
if (estado==1) {
imagen.src = "off.gif";
estado=0;
} else {
imagen.src = "on.gif";
estado=1;
}
}
</script>
</head>
 
<body>
<img id="bombilla" onclick="changeImg()" src="off.gif">
 
</body>
 
</html>


Un Saludo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
Imágen de perfil de txema
Val: 71
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

Cambiar entre dos imagenes

Publicado por txema (16 intervenciones) el 14/01/2015 20:25:41
Siendo perfectamente válido el código de Ismael, aquí tienes otro basado en la función toggle() de jquery (jquery se presta a la reducción de líneas de programación)

Hay muchos caminos para llegar a Roma.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!doctype html>
<html lang="es-ES">
<head>
  <meta charset="utf-8">
  <title>toggle demo</title>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<img src="off.gif" alt="image off">
<img src="on.gif" alt="imagen on" style="display: none">
 
<script>
$("img").click(function() {
  $("img").toggle();
});
</script>
 
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar