Dynam. created img displays in Firefox, but not IE

D

david.karr

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
}
----------------
 
D

david.karr

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.
 
D

david.karr

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?
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top