Como cambiar el src de una imagen dinamicamente

pipezapata · #1 (**permalink**) 09/10/2008, 12:19

necesito cambiar el src de una imagen dinamicamente con javascript( set interval) en ie 7 que puedo hacer?

#2 (**permalink**) 10/10/2008, 06:38

Pues igual que en cualquier otro navegador: Le ponés un ID a la etiqueta de la imagen

<img id="hola" src="" />

Y luego lo cambiás así

imagen = document.getElementById("hola");
imagen.src = "nueva imagen";

Este tema se ha tratado varias veces en el foro, te recomiendo buscar los temas anteriores.

Saludos.

pipezapata · #3 (**permalink**) 12/10/2008, 08:47

gracias alvlin puse en prectica tu respuesta y me funciona perfecto en ie6 pero en ie7 no funciona. lo que trato de hacer es poner un setinterval que cada 1000 mls me cambie el src dinamicamente (siempre va a ser diferente cada ves que cambia).

muchas garcias por tu ayuda!!!!!
pero que puedo hacer con ie7???

#4 (**permalink**) 12/10/2008, 13:58

¿lo que no funciona es el fragmento de código que puse antes? ¿o es el resto del código que incluye al setInterval?

Pegá el código que estás usando, a ver si tiene algún problema.

Saludos.

pipezapata · #5 (**permalink**) 13/10/2008, 12:44

este codigo funciona perfecto en ie6 pero en ie7 solo funciona una ves aunque el setinterval se ejecuta normalmente no me cambia el src de la imagen

te agrdezco muchisimo tu ayuda y recomendaciones pues la verdad soy novato con javascript

aca te coloco el codigo:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!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 id="Head1" runat="server">
<title>Página sin título</title>

</head>

<script type="text/javascript">

function start(){

foto1 = new Image();
foto2 = new Image();
foto3 = new Image();

url = "http://xxx";
foto1.src = url + "?num="+num();
document.images("Img1").src = foto1.src;

url2 = "http://xxx";
foto2.src= url2 +"?num1="+num();
document.images("imagen").src= foto2.src;

url3 = "http://xxx";
foto3.src= url3 +"?num1="+num();
document.images("Img2").src= foto3.src;

}

function num() {
var aleatorio
return aleatorio = Math.round(Math.random()*1000);

}

</script>

<body onload= "setInterval('start()',2000);" >

<form id="form1" runat="server">

<div>

<img id="imagen" alt = "2" src="" style="z-index: 106; left: 664px; width: 280px; position: absolute; top: 64px;
height: 216px"/>

<img id="Img1" src=""style="z-index: 107; left: 336px; width: 280px; position: absolute; top: 64px;
height: 216px" alt = "1" />

<img src="" id="Img2" style="z-index: 108; left: 0px; width: 280px; position: absolute; top: 64px;
height: 216px" />
</div>
</form>
</body>
</html>

#6 (**permalink**) 13/10/2008, 13:21

Pues estás haciendo algo muy poco eficiente, usás variables globales, usás características que pueden generar problemas (document.images). Incluso tenés esta línea
return aleatorio = Math.round(Math.random()*1000);

que no estoy seguro si funciona correctamente.

Te recomiendo usar este código

Código javascript:

Ver originalvar imagenes;
 
function cambiar() {
 
    var i;
    for (i = 0; i < imagenes.length; i++) {
        var url = "http://xxx?num=" + Math.round(Math.random()*1000);
        imagenes[i].src = url;
    }
 
}
 
 
function inicializar() {
    imagenes = [ document.getElementById("imagen"), document.getElementById("Img1"), document.getElementById("Img2") ];
 
    setInterval(cambiar, 2000);
}
 
window.onload = inicializar;

Saludos

pipezapata · #7 (**permalink**) 13/10/2008, 14:26

Otra vez gracias por tu ayuda es muy valiosa!!!

probe el codigo que me enviaste pero asi no me conecta con el servidor de imagenes y por ende no las carga....

lo unicio diferente que hice fue llamar la funcion inicializar en el onload del body..

#8 (**permalink**) 13/10/2008, 17:00

Fue un pequeño error de sintaxis de mi parte, en el código anterior la línea 8 debería ser

Código javascript:

Ver originalimagenes[i].src = url;

en vez de

Código javascript:

Ver originalimagenes.src = url;

Ya lo cambié en el mensaje anterior.

pipezapata · #9 (**permalink**) 14/10/2008, 12:18

hola gracias por tu ayuda me podrias aclara qu es imagen.length a que te refieres con eso???

y ademas el src de cada img es diferente para cada uno, no es el mismo(la url de cada uno es diferente)

como podria cambiar el codigo para que me funcione cada img con su propio src???

gracias!!!!!!!!!

#10 (**permalink**) 14/10/2008, 12:27

la variable imagenes es inicializada en la línea 15, como un vector

Código javascript:

Ver originalimagenes = [ document.getElementById("imagen"), document.getElementById("Img1"), document.getElementById("Img2") ];

imagenes.length simplemente contiene la cantidad de elementos del vector. (bueno, en realidad hay algunos detalles que considerar, pero así funciona)

Saludos.

pipezapata · #11 (**permalink**) 14/10/2008, 12:31

yademas el src de cada img es diferente para cada uno, no es el mismo(la url de cada uno es diferente)

como podria cambiar el codigo para que me funcione cada img con su propio src???

#12 (**permalink**) 14/10/2008, 12:42

Si ese es el caso, no utilices el for. Asigná a cada imagen la ruta que le corresponde:

Código javascript:

Ver originalfunction cambiar() {
    imagenes[0].src = "http://undominio/?num=" + Math.round(Math.random()*1000);
    imagenes[1].src = "http://otrodominio/?num=" + Math.round(Math.random()*1000);
    imagenes[2].src = "http://otromas/?num=" + Math.round(Math.random()*1000);
}

pipezapata · #13 (**permalink**) 14/10/2008, 13:15

ya lo intente yo utilizo ie 7 lo que pasa es que la primera vez que ejecuta el set interval me muetra las imagenes del servidor

el servidor cambia de imagen que va a enviar cada 500 mls ahora el problema es que cada vez que se ejecuta el set intrval se queda las imagenes estaticas

cuando ejecuto 2 instancias al tiempo del ie7 la aplicacion corre sin problemas y las imagenes se refrescan pero cuando hay solo una las imagenes quedan estaticas

que puede ser???????????????