onClick con imagen

kidinshell · #1 (**permalink**) 07/06/2013, 08:57

Hola buena, el caso es que tengo que hacer que una imagen cambie con un click, pensaba que era algo muy sencillo, pero no me funciona lo que tengo.

este es el código que estoy utilizando, que tengo mal?

Código HTML:

<script language="javascript">
function Cambiar() {
document.images['acertada'].src = "images/bien.gif"
}
</script>
<img name='acertada' src="images/si.gif" onClick="Cambiar()">

alexg88 · #2 (**permalink**) 07/06/2013, 09:10

Es onclick, todo en minúsculas

Saludos

kidinshell · #3 (**permalink**) 07/06/2013, 09:18

Gracias por responder tan rápido, pero sigue sin funcionarme, he provado también con onMouseOver y tampoco me cambia

Aeon1 · #4 (**permalink**) 07/06/2013, 09:44

probe tu codigo y si funciona. si cambia la imagen

Edikyutter · #5 (**permalink**) 09/06/2013, 12:41

Bueno bro, primero como consejo no te recomiendo que escribas el script en el mismo documento HTML, no digo que no se pueda, pero es mala práctica, siempre es mejor llamarlo por fuera.
Con respecto a tu problema:
te recomiendo que mejor utilices el método setAttribute para cambiarle la ruta al src de la images al hacerle click.

por ejemplo cuando le haces click el src de la images cambiará por la ruta de la imagen que quieras que aparesca en su lugar

Yo tengo un problema parecido con algo, lo que tengo son 5 imagenes cada una llamada 1,2,3,4,5 respectivamente. La idea es que al hacer click a un botón se genere un número aleatorio del 1 al 5 y reemplase al src de la imagen por el número generado, de esa forma cambia la imagen de forma aleatoria: mira:

HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hdfghgfd</title>
<link rel="stylesheet" href="css/style.css">

</head>
<body>
<img id="image" src="images/1.jpg" height="200px" width="400px"/>
<buttom id="buttom" href="#" style="border:1px solid black">Cambiar Imagen</buttom>

<script src="js/script.js "></script>
</body>

</html>

================================================== =
javaScript

function cambiarImg() {
var hola=Math.floor((Math.random()*5)+1);
console.log(hola);
var img=document.getElementById('image');
img.setAttribute('src','images/'+hola+'.jpg');
}

var butt=document.getElementById('buttom');
butt.onclick=function(){
cambiarImg();
};

=============================================

con eso cada vez que se le da click al botón, la imagen cambia aleatoriamente.

Si necesitas una explicación más a fondo del código, sólo dilo.