Bienvenid@ a Laneros.com

¿Deseas interactuar con más de 375.000 Laneros?

¡Regístrate ahora!

[javascript] cambiar el src de una imagen dinamicamente

Tema en 'Programacion y Diseño de Software' iniciado por jasz, 19 Abril 2006.

  1. jasz

    jasz Lanero novato

    Registrado:
    10 Enero 2002
    Mensajes:
    1,302
    Me Gusta recibidos:
    41
    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:

    CODE, HTML o PHP Insertado:
    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...

    Anuncio


    El URL que sale ahi es mi ejemplo.. a ver si le echan una mirada...
     
    #1
  2. poppetmaster

    poppetmaster Lanero reconocido

    Registrado:
    11 Febrero 2004
    Mensajes:
    752
    Me Gusta recibidos:
    60
    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.
     
    #2
  3. jasz

    jasz Lanero novato

    Registrado:
    10 Enero 2002
    Mensajes:
    1,302
    Me Gusta recibidos:
    41
    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... :)
     
    #3
  4. poppetmaster

    poppetmaster Lanero reconocido

    Registrado:
    11 Febrero 2004
    Mensajes:
    752
    Me Gusta recibidos:
    60
    Hola jasz.. por que no haces lo siguiente:

    ejemplo (eso si basico) pero funciono en ambos navegadores:
    puedes cambiarlo ya sea por getElementById o directamente por el array de los elementos img (image['nombre_imagen'])
     
    #4
  5. Dr4gnu5

    Dr4gnu5 Lanero reconocido

    Registrado:
    31 Octubre 2005
    Mensajes:
    168
    Me Gusta recibidos:
    40
    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
     
    #5
  6. jasz

    jasz Lanero novato

    Registrado:
    10 Enero 2002
    Mensajes:
    1,302
    Me Gusta recibidos:
    41
    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...
     
    #6
  7. poppetmaster

    poppetmaster Lanero reconocido

    Registrado:
    11 Febrero 2004
    Mensajes:
    752
    Me Gusta recibidos:
    60
    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:

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

     
    #7
  8. jasz

    jasz Lanero novato

    Registrado:
    10 Enero 2002
    Mensajes:
    1,302
    Me Gusta recibidos:
    41
    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...
     
    #8
  9. poppetmaster

    poppetmaster Lanero reconocido

    Registrado:
    11 Febrero 2004
    Mensajes:
    752
    Me Gusta recibidos:
    60
    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.
     
    #9
  10. jasz

    jasz Lanero novato

    Registrado:
    10 Enero 2002
    Mensajes:
    1,302
    Me Gusta recibidos:
    41
    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.
     
    #10

Compartir esta página