Click to See Complete Forum and Search --> : Image swapping in IE


JTWilcox
08-04-2005, 11:33 AM
Hello all,

I've got a test page up here (http://www.jtwilcox.com/gallerytest2/) .

I'm making a small image gallery with thumbnails above the larger image (this part is nested in an iframe, by the way). My code works in safari, mozilla (+ firefox, +camino) but it won't work in IE. The code I have right now is as follows:

<script language="JavaScript"><!--
function flip(name,src) {
if (document.images)
document.images[name].src = src;
}
//--></script>

And a sample of one of the thumbnails:
<a href="#" onClick="flip('theimage','images/aeroplane.jpg');return false"><img src="thumbnails/aeroplaneT.jpg" width="45" height="60" border="0"></a>

IE keeps actually trying to link to "#" and not following the javascript. I'm pretty new to JS, so sorry if this is ridiculous. Just wondering if there is a way around this so it will work on IE as well. Thanks in advance!

-Jon

Ultimater
08-04-2005, 01:12 PM
The following will disrrupt IE:

<img id="theimage" name="theimage" src="" width="" height="" alt="">

IE understands height="" as height=0

Use this instead:

<img name="theimage" src="" onerror="this.style.display='none'">


And use this:

<script type="text/javascript">
function flip(name,srca) {

if (document.images){
document.images[name].src = srca;
document.images[name].style.display="block"
}
return true

}
</script>


in place of this:

<script language="JavaScript"><!--
function flip(name,src) {
if (document.images)
document.images[name].src = src;
}
//--></script>



Enjoy!