Como cambiar una imagen dinamicamente?

[kafok]

Hola, como puedo cargar varias imagenes por medio de javascript y cambiar de imagen dependiendo de condiciones que yo establezca sin tener que cargar las imagenes cada vez que las cambie?

[_cronos2]

Puedes tenerlas todas en el HTML e ir cambiándoles el display según convenga, aunque creo que si la imagen tiene display:none no se carga en algunos navegadores, así que puedes darle un tamaño de 1 x 1 px o algo así, y en el onload de cada imagen la ocultas (por ejemplo).
Saludos (:

[kafok]

Gracias, ya se dos tecnicas para hacerlo, pero lo que me gustaria hacer es cambiar la imagen mediante DOM.

Se puede?

[_cronos2]

Por poder se puede, pero tiene que ir cambiando el src, y la primera vez que se cambia tiene que cargarse la imagen, a no ser que uses un objeto Image en JS, pero sigo viéndolo innecesario. Preferiría hacerlo de la otra manera, pero como veas.
Saludos (:

[Hugo_Euan]

Hola kafok Bueno lo que yo haría en tu caso sin tanto rollo es utilizar un Array...
en el cual almaceno mis imagenes... (aclaro... esto es muy util si conoces el número de imágenes que quieres mostrar)... si no conoces el número de imágenes puedes utilizar otro método... El array seria del tipo:

Código Javascript:

var ArrImages=['image1.jpg', 'image2.jpg', 'image3.jpg', 'imageN.jpg'];
 

una vez que tengas tu array... lo puedes manipular como quierass.. mostrando la imagen que quieras dependiendo te tus necesidades...

por ejemplo...

Código Javascript:

var ElapsedTime = 10;  //definimos el tiempo en segundos...
var Counter = 0; //definimos un contador para las imágenes...
 
//mediante el uso de SetInteval haceos que la imagen cambien cada 10 segundos..
//SetInterval ejecutara la funcion CHANGE_IMAGE() cada 10 segundos...
//ElapsedTime se multiplica por 1000 por que el valor que recibe setInterval debe ser en ms.
 
setInterval('CHANGE_IMAGE()', (ElapsedTime * 1000));
 
function CHANGE_IMAGE(){
    Counter++;
    var NewContent = document.getElementById="NuevoContenido";
    NewContent.innerHTML='<img src="image'+Counter+'.jpg" />';
}
 

El código anterior lo que hará es cambiar tus imégenes cada 10 segundos....
("Aclaro... el código es meramente un ejemplo para que puedas tal vez darte una idea de lo que querias... funciona.. pero aún le falta trabajarlo un poco, por ejemplo ponerle controladores de eventos... por ejemplo en el caso del contador al llegar a 4 producirá error debido a que la imágen 4 no existe.. entre otros")

Espero que te sea de utilidad... :3

SALUDOS y ÉXITO...

[_cronos2]

Iniciado por Hugo_Euan

El código anterior lo que hará es cambiar tus imégenes cada 10 segundos....

Estoy seguro de que ese código no funcionará tal y como está, porque a simple vista veo un error y un fallo (que no es lo mismo), además del hecho de que las imágenes estarán rotas.
Saludos (:

[Hugo_Euan]

jejeje.... me perdí con lo de las imagenes rotas...
tal vez te refieres a que en el array tiene indexaciones del tipo "image1.jpg"
y la invocación la hago tipo image + Counter + jpg
y debió ser ArrImages[Counter]

que descuido enorme de mi parte....
gracias por tu aclaración... y si ese no fue el error o el fallo.. hazmelo saber jeje

Saludos y Exito...

[_cronos2]

Más allá de declarar el array y no usarlo, que también, yo me refería a esto:

Código:

var NewContent = document.getElementById="NuevoContenido";

, a esto:

Código:

setInterval('CHANGE_IMAGE()', (ElapsedTime * 1000));

y a esto:

Código:

NewContent.innerHTML='<img src="image'+Counter+'.jpg" />';

1) Creo que está bastante claro el SyntaxError
2) No uses un string en setInterval/Timeout! Usa el handler!
3) Mientras "image" + Counter + ".jpg" exista, no hay problema; pero creo que "image4365.jpg" no existirá, y llegará un momento en que Counter llegue a ese número. A lo que me refiero es que no le pones un tope a Counter (error). Te recomiendo el operador %

Código:

NewContent.innerHTML='<img src="image' + (Counter % images.length) + '.jpg" />';

Saludos (:

[caricatos]

Iniciado por kafok

...pero lo que me gustaria hacer es cambiar la imagen mediante DOM.

Se puede?

¿Qué sabes sobre el DOM...?

La opción de tener las imágenes ocultas creo que es una buena idea: Javascript: rollover.

Saludos

[Hugo_Euan]

Iniciado por _cronos2

Más allá de declarar el array y no usarlo, que también, yo me refería a esto:
1) Creo que está bastante claro el SyntaxError

Código:

var NewContent = document.getElementById="NuevoContenido";

wooo.. wo.. woooww.. que error en getElementById.... ya caigo.. gracias ....

Iniciado por _cronos2

, a esto:
2) No uses un string en setInterval/Timeout! Usa el handler!

Código:

setInterval('CHANGE_IMAGE()', (ElapsedTime * 1000));

El uso de un string dentro de la rutina setInterval es totalmente válido... no es ningún error o fallo... en realidad... su sintaxis de uso esta definida de esa manera... que los exploradores evolucionan permitiendo nuevos metodos es distinto...

Iniciado por _cronos2

y a esto:

Código:

NewContent.innerHTML='<img src="image'+Counter+'.jpg" />';

3) Mientras "image" + Counter + ".jpg" exista, no hay problema; pero creo que "image4365.jpg" no existirá, y llegará un momento en que Counter llegue a ese número. A lo que me refiero es que no le pones un tope a Counter (error). Te recomiendo el operador %

Código:

NewContent.innerHTML='<img src="image' + (Counter % images.length) + '.jpg" />';

Saludos (:

amm.. y pues.... lo que tu dices del tope estaba previsto... por esa razón se hizo la aclaracion al final de primer post...

Iniciado por Hugo_Euan

("Aclaro... el código es meramente un ejemplo para que puedas tal vez darte una idea de lo que querias... funciona.. pero aún le falta trabajarlo un poco, por ejemplo ponerle controladores de eventos... por ejemplo en el caso del contador al llegar a 4 producirá error debido a que la imágen 4 no existe.. entre otros")

Saludos y Exito....

[rafa_yael]

Iniciado por kafok

Hola, como puedo cargar varias imagenes por medio de javascript y cambiar de imagen dependiendo de condiciones que yo establezca sin tener que cargar las imagenes cada vez que las cambie?

Nesecitas saber las condiciones para definir el codigo. Acabo de ver un codigo que va asi...

Código Javascript:

window.onload = function (){
    
    
var SrcDeTuImg = document.getElementById('logo');
var fecha  = new Date();
var mes    = fecha.getMonth()+1;
var diaMes = fecha.getDate();
var hora   = fecha.getHours();
var cont   = diaMes+''+mes;
 
 
 
if (cont == 99){
     if (hora>0&&hora<13){
SrcDeTuImg.src ='imagenes/2.jpg';
  }
}
}//fin de la funcion
 

Dada una fecha y hora, puedes cambiar la imagen. Pero no te recomiendo cargar todas las imagenes de un solo jalon. Suponiendo que hagas una galeria con las imagenes. Pues retrasaria la carga. Seria mejor img por img.

Espero que te haya entendido bien.