Dynam. created img displays in Firefox, but not IE

Discussion in 'Javascript' started by david.karr, May 19, 2008.

  1. david.karr

    david.karr Guest

    I have a simple app I'm writing as a learning exercise. It displays a
    collection of thumbnail images, but the HTML also defines a full-size
    version of the image, along with a block of caption text for the
    image. When certain actions occur on the thumbnail image (just
    mouseover for now), a div is dynamically created which contains the
    full-size image and the caption block, and this div is appended to a
    div that lies below the thumbnail collection.

    This is working fine in Firefox2, but for reasons I can't understand,
    in IE6 the dynamically created div containing the full-size image and
    the caption only shows the caption, not the image.

    I installed firebug-lite, and during the dynamic div creation I log
    the image URL and the width and height. This shows the URL I expect,
    but in IE the width and height are 0. I even tried manually setting
    the width and height of the image in the HTML to non-zero, but IE
    still thinks it's zero. I also tried a simple-minded image pre-load
    technique (http://www.netmechanic.com/news/vol3/loadtime_no6.htm), but
    that had no effect.

    So, what browser incompatibility issue have I overlooked, and how can
    I resolve it?

    I'm enclosing my HTML page (excerpted), along with my js and css
    files. I'm not attaching the image files I'm using.

    ----------------
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
    TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1" />
    <title>Image Gallery</title>
    <link rel="stylesheet" type="text/css" href="gallery.css">
    <script type="text/javascript" src="yui/yahoo-dom-event/yahoo-
    dom-event.js"></script>
    <script type="text/javascript" src="yui/element/element-beta-
    min.js"></script>
    <script type="text/javascript" src="firebug/firebug.js"></
    script>
    <script type="text/javascript" src="gallery.js"></script>
    <script type="text/javascript">
    var img1 = new Image();
    img1.src = "images/belongingsoutside.jpg";
    </script>
    </head>
    <body>
    <div id="gallery">
    <div id="shoebox">
    <div class="photopair">
    <div class="thumbnail">
    <img src="images/belongingsoutsidet.jpg"/>
    </div>
    <div class="fullsize">
    <img src="images/belongingsoutside.jpg" width="10" height="10"/>
    </div>
    <div class="caption">
    Some text ...
    </div>
    </div>
    <div class="photopair">
    <div class="thumbnail">
    <img src="images/homemovingt.jpg"/>
    </div>
    <div class="fullsize">
    <img src="images/homemoving.jpg"/>
    </div>
    <div class="caption">
    Some text ...
    </div>
    </div>
    </div>
    <div id="lightbox"></div>
    </div>
    <script type="text/javascript">
    YAHOO.util.Event.onDOMReady(YAHOO.gallery.init);
    </script>
    </body>
    </html>
    ----------------

    ----------------
    YAHOO.namespace("gallery");

    var $E = YAHOO.util.Event;
    var $D = YAHOO.util.Dom;

    YAHOO.gallery.init =
    function ()
    {
    // thumbnails have black border by default, yellow while
    hovering, and
    // green if locked into lightbox.
    var thumbnails = $D.getElementsByClassName("thumbnail");
    $E.on(thumbnails, "mouseover",
    function (evt)
    {
    // sticky flag says whether fullsize is locked into
    lightbox.
    if (!this.sticky)
    {
    $D.getFirstChild(this).style.borderColor =
    "yellow";
    var fullsize = $D.getNextSibling(this);
    var caption = $D.getNextSibling(fullsize);
    //var captiontext = $D.getFirstChild(caption);
    var captiontext = caption.innerHTML;
    var imgelem = $D.getFirstChild(fullsize);
    var fullsizediv = document.createElement("div");
    // Attach fullsizediv to thumbnail so we can
    remove it
    // from lightbox later.
    this.fullsizediv = fullsizediv;
    var fullsizeimage =
    document.createElement("img");
    fullsizeimage.src = imgelem.src;
    console.log("src[" + fullsizeimage.src + "]");
    fullsizeimage.width = imgelem.width;
    fullsizeimage.height = imgelem.height;
    console.log("width.height[" +
    fullsizeimage.width + "." + fullsizeimage.height + "]");
    fullsizediv.appendChild(fullsizeimage);

    fullsizediv.appendChild(document.createElement("br"));

    fullsizediv.appendChild(document.createTextNode(captiontext));
    var lightbox = new
    YAHOO.util.Element("lightbox");
    lightbox.appendChild(fullsizediv);
    }
    });
    $E.on(thumbnails, "mouseout",
    function (evt)
    {
    // sticky flag says whether fullsize is locked into
    lightbox.
    if (!this.sticky)
    {
    $D.getFirstChild(this).style.borderColor =
    "black";
    var fullsizediv = this.fullsizediv;
    var lightbox = new
    YAHOO.util.Element("lightbox");
    lightbox.removeChild(fullsizediv);
    }
    else
    $D.getFirstChild(this).style.borderColor =
    "green";
    });
    $E.on(thumbnails, "click",
    function (evt)
    {
    this.sticky = !this.sticky;
    $D.getFirstChild(this).style.borderColor =
    (this.sticky ? "green" : "yellow");
    });
    }
    ----------------

    ----------------
    ..photopair, .thumbnail
    {
    display:inline;
    }
    ..thumbnail img
    {
    border: 3px solid;
    border-color: black;
    }
    #shoebox .fullsize
    {
    display:none;
    }
    #shoebox .caption
    {
    display:none;
    }
    #shoebox
    {
    border: 1px black solid
    }
    ----------------
     
    david.karr, May 19, 2008
    #1
    1. Advertising

  2. david.karr

    david.karr Guest

    I'm still struggling with this. I even tried adding an image
    preloader (http://warpspire.com/tipsresources/interface-scripting/
    image-preloading-revisited/), but the images still do not display in
    IE, and it thinks the width/height of them is zero.

    However, when I changed my CSS so the previously hidden fullsize
    images in the shoebox were now set to "display:inline", the copy of
    the element into the lightbox shows up the image.

    So, in Firefox, whether I preload the image or not, it shows up fine
    when I dynamically create it. In IE, the dynamically created image
    element doesn't show up, whether I preload the image or not.

    I also tried manually setting both the fullsize div and img to
    "display:inline" after creating them, but that had no effect.
     
    david.karr, May 20, 2008
    #2
    1. Advertising

  3. david.karr

    david.karr Guest

    Ok, I've found a solution. In my original code, I thought I should
    set the "width" and "height" of the created img to reflect the width &
    height of the img element I was copying from. I tried removing those
    assignments, and that made it work. It almost seems like IE doesn't
    know what the width & height of the image is until after it's
    rendered, even if the image is preloaded.

    Can anyone provide any more background to this?
     
    david.karr, May 20, 2008
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Chumley Walrus
    Replies:
    1
    Views:
    12,189
    =?Utf-8?B?QnJpYW4gQnJvd24=?=
    Dec 16, 2004
  2. news.austin.rr.com

    how to download img from html img tag

    news.austin.rr.com, Apr 27, 2005, in forum: ASP .Net
    Replies:
    2
    Views:
    517
    Steve C. Orr [MVP, MCSD]
    Apr 27, 2005
  3. christy

    IE8 img scr="" displays a red X

    christy, Jul 24, 2009, in forum: ASP .Net
    Replies:
    3
    Views:
    3,089
    christy
    Jul 27, 2009
  4. Luke Venediger
    Replies:
    3
    Views:
    152
  5. anne001
    Replies:
    9
    Views:
    315
    Thomas 'PointedEars' Lahn
    Dec 1, 2007
Loading...

Share This Page