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