Como crear con javascript un boton que cambie una imagen

Jose_lin · #1 (**permalink**) 25/05/2009, 09:33

Hola,

Lo que quiero conseguir es que al cliquear un boton cambie una imagen de inicio y al volver a cliquearlo vuelva a la imagen de inicio otra vez.
es decir que vaya cambiando entre dos imagenes

David · #2 (**permalink**) 25/05/2009, 12:09

Sólo necesitas cambiar el src de la imagen.
Por ejemplo:

Código html:

Ver original<img id="imagen" src="inicio.jpg" alt="Inicio" />

Código Javascript:

Ver originaldocument.getElementById("imagen").src = "otro.jpg";

Jose_lin · #3 (**permalink**) 25/05/2009, 13:34

Como puedo hacerlo declarando una variable global para saber que imagen esta en pantalla?

<html>
<head>
<script type="text/javascript">

var .....................................
function cambia()
{
........................................

}
</script>
</head>

<body>
<img id="imagen" src="premio.gif" alt="Inicio"/>
<form>
<input type="button" onclick="cambia()" value="Cambiar imagen">
</form>
</body>

</html>

David · #4 (**permalink**) 25/05/2009, 18:53

¿Cuál es la duda exactamente? Ya que nada más tienes que hacer una condicional if y asignar la variable:

Código Javascript:

Ver originalvar actual = "premio.gif";

Código Javascript:

Ver originalactual = (actual == "premio.gif") ? "otro.gif" : "premio.gif";
document.getElementById("imagen").src = actual;

Jose_lin · #5 (**permalink**) 26/05/2009, 03:54

Tengo que hacerlo con una funcion cambia()
Tengo esto pero no me sale

<html>
<head>
<script type="text/javascript">

var actual = "premio.gif";
function cambia()
{
actual = (actual == "premio.gif") ? "icono_movie.gif" : "premio.gif";
document.getElementById("imagen").src = actual;
}
</script>
</head>

<body>
<img src="premio.gif" width="107" height="98">
<form>
<input type="button" onclick="cambia()" value="Cambiar imagen">
</form>
</body>

</html>

David · #6 (**permalink**) 26/05/2009, 06:34

No estás asignando un id="imagen" al <img>

Jose_lin · #7 (**permalink**) 26/05/2009, 10:34

podrias ponerme el codigo entero , es que o acabo de lograr resolverlo, me seria de gran ayuda.

Gracias

David · #8 (**permalink**) 26/05/2009, 10:36

En el primer mensaje ya te había puesto como debes tener el <img />:

Código html:

Ver original<img id="imagen" src="premio.gif" alt="Imagen" />