Image display on mouseOver, but not in IE

[Tyrone Slothrop]

I am coding a site which involves uploading images. All of the PHP
and display is OK but the client wants to be able to display the image
thumbnail on the upload page and show the full image on mouseOver
instead of the popup I coded. The section of code below works
perfectly in Firefox but not at all in IE (why am I not surprised?).
The page is nearly 100% dynamic, so this is extracted from the source
of a test page. The code in question is in the last two spans.
Please excuse line wrapping:

<div id="i1" style="clear:both;">
<div style="margin:10px 0 10px 15px; font-size: 1.2em;
text-align:left; font-weight:bold;">Image #1</div>
<div id="row">
<span id="lbl">Image Caption:</span>
<span id="fld"><input type="Text" id="i_caption1"
name="i_caption1" value=""></span>
</div>
<div id="row">
<span id="lbl">Select Image to Upload:</span>
<span id="fld"><input id="image1" type="file" name="image1"
value=""></span>
</div>
<div id="row" style="position:relative;">
<span id="lbl"><label for="dele1">Delete This
Image?</label><br><input type="Checkbox" id="dele1" name="dele1"
value="1" style="border:0;"><label for="dele1">Yes</label></span>
<span id="fld"><a href="#" onClick="openView ('10031.5.1.jpg',
200, 266)"><img
onMouseover="document.getElementById('show1').styl e.display='inline';"
onMouseout="document.getElementById('show1').style .display='none';"
src="uImages/10031.5.1.t.jpg?f10eb11e77ac7d52e980c80b010f18c6"
border="0"></a></span>
<span id="show1" style="z-index:1; width:200; height:266;
display:none; position:absolute; left:280px;"><img
src="uImages/10031.5.1.jpg?f10eb11e77ac7d52e980c80b010f18c6"
width="200" height="266" border="0"></span>
</div>
</div>

Any ideas?

As a side note, the randomly generated query string following the
image name is a hack I found which prevents the image from being
reloaded from cache in IE. It seems that no header prevents IE from
caching images (which, after a couple hours of going nuts, I figured
out... duh!). Anyway, any hack that works is a good hack. ;-)

TIA!

[mscir]

Tyrone Slothrop wrote:

I am coding a site which involves uploading images. All of the PHP
and display is OK but the client wants to be able to display the image
thumbnail on the upload page and show the full image on mouseOver
instead of the popup I coded. The section of code below works
perfectly in Firefox but not at all in IE (why am I not surprised?).
The page is nearly 100% dynamic, so this is extracted from the source
of a test page. The code in question is in the last two spans.
Please excuse line wrapping:
<snip>
As a side note, the randomly generated query string following the
image name is a hack I found which prevents the image from being
reloaded from cache in IE. It seems that no header prevents IE from
caching images (which, after a couple hours of going nuts, I figured
out... duh!). Anyway, any hack that works is a good hack. ;-)
TIA!

When I hard code the image src (in both places) to one that exists on my
hdd, your code works in my IE6. Did you try that yourself? e.g.
<img ... src="/Temp/stampdad/images/pwo-logo.gif" border="0"></a>
<img src="/Temp/stampdad/images/pwo-logo.gif" width="200" height="266"
border="0">

I'm wondering if IE has a problem with the random string?
uImages/10031.5.1.t.jpg?f10eb11e77ac7d52e980c80b010f18c6

Mike

[Tyrone Slothrop]

On Fri, 17 Jun 2005 19:27:39 -0700, mscir <ms***@yahoo.com> wrote:

Tyrone Slothrop wrote:

I am coding a site which involves uploading images. All of the PHP
and display is OK but the client wants to be able to display the image
thumbnail on the upload page and show the full image on mouseOver
instead of the popup I coded. The section of code below works
perfectly in Firefox but not at all in IE (why am I not surprised?).
The page is nearly 100% dynamic, so this is extracted from the source
of a test page. The code in question is in the last two spans.
Please excuse line wrapping:
<snip>
As a side note, the randomly generated query string following the
image name is a hack I found which prevents the image from being
reloaded from cache in IE. It seems that no header prevents IE from
caching images (which, after a couple hours of going nuts, I figured
out... duh!). Anyway, any hack that works is a good hack. ;-)
TIA!

When I hard code the image src (in both places) to one that exists on my
hdd, your code works in my IE6. Did you try that yourself? e.g.
<img ... src="/Temp/stampdad/images/pwo-logo.gif" border="0"></a>
<img src="/Temp/stampdad/images/pwo-logo.gif" width="200" height="266"
border="0">

I'm wondering if IE has a problem with the random string?
uImages/10031.5.1.t.jpg?f10eb11e77ac7d52e980c80b010f18c6

Mike

After playing around a bit, I realize it has something to do with the
div position:relative and the span position:absolute. The query
string removal does not affect the image display in my tests.

Here (again) is the section in question:

<div id="row" style="position:relative;">
<span id="lbl"><label for="dele1">Delete This
Image?</label><br><input type="Checkbox" id="dele1" name="dele1"
value="1" style="border:0;"><label for="dele1">Yes</label></span>
<span id="fld"><a href="#" onClick="openView ('10031.5.1.jpg',
200, 266)"><img
onMouseover="document.getElementById('show1').styl e.display='inline';"
onMouseout="document.getElementById('show1').style .display='none';"
src="uImages/10031.5.1.t.jpg?f10eb11e77ac7d52e980c80b010f18c6"
border="0"></a></span>
<span id="show1" style="z-index:1; width:200; height:266;
display:none; position:absolute; left:280px;"><img
src="uImages/10031.5.1.jpg?f10eb11e77ac7d52e980c80b010f18c6"
width="200" height="266" border="0"></span>
</div>
</div>

If I remove the position:relative from the div, the image displays in
IE, but all the way over on the left side of the browser window.

I am at a loss to the solution -- I just haven't had the experience to
troubleshoot this situation. Any geniuses out there see the folly of
my efforts here?