Cambiar imagen en javascript
Hola apolinux,
No domino mucho la programación en javascript y quisiera realizarle una consulta. Lo que pretendo es que una imagen presente en una página web se modifique por otra imagen al cabo de un segundo. El código simplificado seria este:
<html>
<head>
<title>Page title</title>
<script language="JavaScript" type="text/javascript">
var c = 1
*la variable c es un contador*
function incr(){ *function incr() incrementa la
c++ variable c*
}
</script>
</head>
<body onload="inc()">
image = '<img src="imagen'+c+'.gif">'
window.setTimeout("incr()",1000)
document.write(image)
</script>
</body>
</html>
Teóricamente la variable c al principio vale 1, por tanto se visualiza imagen1.gif. Mediante window. SetTimeout hacemos una llamada a la function incr() cada segundo. De modo que cada segundo se incrementa la variable c y visualizamos así imagen2.gif, imagen3.gif y así sucesivamente. Finalmente visualizamos en pantalla la imagen.
El problema es que a efectos prácticos la variable c siempre me toma el valor 1, y siempre estoy visualizando la imagen1.gif.
Me gustaría saber que estoy haciendo mal. Gracias.
Su respuesta será valorada.
No domino mucho la programación en javascript y quisiera realizarle una consulta. Lo que pretendo es que una imagen presente en una página web se modifique por otra imagen al cabo de un segundo. El código simplificado seria este:
<html>
<head>
<title>Page title</title>
<script language="JavaScript" type="text/javascript">
var c = 1
*la variable c es un contador*
function incr(){ *function incr() incrementa la
c++ variable c*
}
</script>
</head>
<body onload="inc()">
image = '<img src="imagen'+c+'.gif">'
window.setTimeout("incr()",1000)
document.write(image)
</script>
</body>
</html>
Teóricamente la variable c al principio vale 1, por tanto se visualiza imagen1.gif. Mediante window. SetTimeout hacemos una llamada a la function incr() cada segundo. De modo que cada segundo se incrementa la variable c y visualizamos así imagen2.gif, imagen3.gif y así sucesivamente. Finalmente visualizamos en pantalla la imagen.
El problema es que a efectos prácticos la variable c siempre me toma el valor 1, y siempre estoy visualizando la imagen1.gif.
Me gustaría saber que estoy haciendo mal. Gracias.
Su respuesta será valorada.
1 respuesta
Respuesta de apolinux
1
en vez de settimeout es setinterval, prueba este codigo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>
<script>
cont=1;
function incr(v)
{
cont++;
//console.log('hola' + cont);
document.getElementById('img1').src='imagen' + cont + '.gif';
}
setInterval('incr()',1000);
</script>
<body onload="incr(1)">
<img src="imagen1.gif" border="1" width="20" height="20" name="img1" id="img1" />
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>
<script>
cont=1;
function incr(v)
{
cont++;
//console.log('hola' + cont);
document.getElementById('img1').src='imagen' + cont + '.gif';
}
setInterval('incr()',1000);
</script>
<body onload="incr(1)">
<img src="imagen1.gif" border="1" width="20" height="20" name="img1" id="img1" />
</body>
</html>
