[javascript] cambiar el src de una imagen dinamicamente

jasz

Lanero Reconocido
10 Ene 2002
1,130
Tengo este problemita que me ha sacado canas.. este es el post en ingles que puse en otro foro, obviamente pueden responder en espanol si tienen alguna sugerencia.
*****************************************
I have a problem here:

Note: this works perfectly on Firefox, the problem occurs only on Internet Explorer.

This is basically, an image gallery, when the page loads, there are some items listed (my sample case is a real estate agent's website, where homes are listed).

When the user clicks on the thumbnail, a dhtml popup is displayed with the detailed information of the home AND additional images (here starts the problem).

When the dhtml popup loads, it has 3 children div's.
the first one > where the enlarged images are displayed
the second one > the container of the thumbnails.
the third one > text (information about the home, in my case).

When the visitor clicks on one of the thumbnails, the enlarged image should be displayed on the first div. The code for this portion is something like:

HTML:
<div id="preview_div"><img src="/path/to/default/image.jpg" id="preview_main"></div>

my javascript is the following:

Código:
function enlargeMe(photo_filename) {
    newimg = document.createElement("img"); 
    newimg.src = photo_filename;
    
    pn = document.getElementById("preview_main").parentNode;
    pn.removeChild(document.getElementById('preview_main'));
    newimg.id = 'preview_main';
    pn.appendChild(newimg);
    newimg.style.border= '1px solid #dedede';
    newimg.style.height='250px';
    document.getElementById('preview_main').onclick = function () {
        maximizeMe(photo_filename);
    }    
}

This works perfectly on Firefox, but IE refuses to load the new image.

I have the Internet Explorer "developer toolbar" to see the DOM. When my function is executed, I see that the "readyState" attribute of the image also changes to "loading", but it never reaches "complete", is there any way i can force the img to reload?

Here is the URL of the sample gallery:

http://ecentricsolutions.com/real_estate/listings.php?home_id=1

Questions/comments/suggestions are gladly accepted.

***************************************************
Me da pereza traducir todo eso, la cuestion es que la !#!@$#!@ imagen no carga en IE.. al parece IE no carga una imagen cuando su atributo "src" ha cambiado...

El URL que sale ahi es mi ejemplo.. a ver si le echan una mirada...
 
Jasz pero tu estas creando un nuevo elemento (img) .. o me equivoco..??? probaste solo cambiando el atributo src al elemento img (esto para no estar implementando la creacion de un nuevo elemento newimg=document.createElement("img") por cada click en el thumbnail)????
aunque la idea es poderte ayudar con el codigo... aqui en esta pagina hay algo igualito a lo que quieres implemetar... pero este es basado en CSS .. puede ser una alternativa...
http://www.cssplay.co.uk/menu/scroll_gallery.html

PD. En esa pagina muestran el poder de los CSS ... muy recomendada.
 
pues, al principio ese era el codigo, asi como vos decis, en vez de crear un elemento nuevo, lo que hacia era simplemente cambiar el src de la imagen.. pero igual tampoco funcionaba en IE.. pero en Firefox si funcionaba... entonces ahora ando es buscandole por donde hacerle...

El ejemplo que mostras esta muy bacano pero tiene un detalle: hay que cargar todas las imagenes desde que carga la pagina, y eso es lo que no quiero.

Si te das cuenta, mi pagina carga la informacion (de las casas) desde un archivo XML (generado en el backend con php) y luego la idea es cargar las imagenes a medida que el usuario las solicita. Esto hace que lo que hay que cargar al principio es minimo, y eso hace que la pagina cargue rapido.

Yo tambien soy fan de usar CSS, no mas mire el css de mi pagina... :)
 
Hola jasz.. por que no haces lo siguiente:

function enlargeMe(photo_filename) {

myUrl = myUrl = '/real_estate/phpThumb/phpThumb.php?src=' + photo_filename + '&h=250';
newimg = new Image();
newimg.src = myUrl;

document.getElementById('preview_main').src = newimg.src;
//document.images['imagen_inicial'].src = newimg.src;

}
ejemplo (eso si basico) pero funciono en ambos navegadores:
<html>
<head>
<script language="javascript" type="text/javascript">

function enlargeMe(photo_filename) {

myUrl = 'Powerd_By/'+photo_filename;
newimg = new Image();
newimg.src = myUrl;

document.getElementById('preview_main').src = newimg.src;
//document.images['imagen_inicial'].src = newimg.src;

}
</script>
</head>

<body>
<IMG id="preview_main" name="imagen_inicial" SRC="logo1.jpg" ALT="prueba">
<input type="button" name="cambiar" value="cambiar" onclick="enlargeMe('logo2.jpg')">
</body>
</html>
puedes cambiarlo ya sea por getElementById o directamente por el array de los elementos img (image['nombre_imagen'])
 
hola hay varias formas aqui te muestro una facil

<img src="imagen1" id='imagen_o'>
y en javascript
function cambia_img() {
var imagen2="../images/spacer.gif";
document.form.imagen_o.src=imagen2;
}
es facil.. o lo quieres hacer por get element ? o creando el onjeto imagen o per el eval.

espero te sirva
 
He probado con el codigo de los 2.. y ninguno me sirvio...
ojo: el problema es con Internet Explorer (6.0.2800.1106)

En Firefox, todo funciona al pelo...
 
jasz dijo:
He probado con el codigo de los 2.. y ninguno me sirvio...
ojo: el problema es con Internet Explorer (6.0.2800.1106)

En Firefox, todo funciona al pelo...
hum .. me podrias colocar como probaste el ejemplo...?? es decir puedes colocar el codigo.. porque mirando un poco el codigo de la pagina porque haces:

myFrame.document.write('<html><head></head><body style="margin: 0;padding: 0;"><center>' + <img src="' + myURL + '" />' + '</center></body><html>');

y antes cuando dejabas que la imagen la escribiera la funcion maximizeMe():

function maximizeMe(filename) {
myWindow = window.open('', 'Image' , 'toolbar=false');
myWindow.document.write('<img src="' + filename + '" >' );
}
 
sorry, obviamente he estado moviendo el codigo a ver como resolvia ese problemita.. parece que por fin funciona como quiero...
http://ecentricsolutions.com/real_estate/listings.php?home_id=1
En vez de meter una imagen y cambiarle el src.. lo que hago ahora es cambiarle el background-image al div que debe contener a la imagen...

Pero me estaba dando el mismo problema, aun cuando le cambiaba el atributo "background-image" .. igual no lo cargaba.

Ahora lo que hago es hacer ese cambio, y luego cambiarle el visibility a "hidden" .. y luego a "visible" .. pero con un delay de medio segundo..

Asi parece que Explorer si se anima a cargar la imagen y la muestra en su sitio.. se ve mejor, cierto?

> una de las opciones temporales que hice fue en vez de usar un div.. estaba usando un iframe... pero se veia horrible...
 
jasz dijo:
sorry, obviamente he estado moviendo el codigo a ver como resolvia ese problemita.. parece que por fin funciona como quiero...
http://ecentricsolutions.com/real_estate/listings.php?home_id=1
En vez de meter una imagen y cambiarle el src.. lo que hago ahora es cambiarle el background-image al div que debe contener a la imagen...

Pero me estaba dando el mismo problema, aun cuando le cambiaba el atributo "background-image" .. igual no lo cargaba.

Ahora lo que hago es hacer ese cambio, y luego cambiarle el visibility a "hidden" .. y luego a "visible" .. pero con un delay de medio segundo..

Asi parece que Explorer si se anima a cargar la imagen y la muestra en su sitio.. se ve mejor, cierto?

> una de las opciones temporales que hice fue en vez de usar un div.. estaba usando un iframe... pero se veia horrible...
Hola... mirando con el IE ya veo que funciona bien...chevere que ya se resolvio el problema..
ahora que comentas la solucion con el delay.. se ve que IE tiene ese incoveniente,.... mirando en internet sobre imagenes en JavaScrip se decia que para que el efecto de cambio de imagen funcionara se debia realizar un precarga de la imagen :
newimg =new Image();
newimg.src = myUrl;
y luego hacer el cambio... bueno todos los dias se ve algo nuevo.
 
La precarga de las imagenes hay que hacerlas en el onload(), desafortunadamente, IE no carga nada nuevo despues de ese evento, entonces toca inventarse trucos pendejos como este pa que las cosas funcionen bien en ambos navegadores.
 

Los últimos temas