im a fool for using iframes

[timeshhift]

Im designing a website for my family candle business, and for the "featured products" page i'd like to display 1 large image with 2 smaller thumbnails next to it. the two small thumbnails should switch the main image when they are clicked so as to allow for a larger view. I'm reluctantly using iframes to accomplish this (I dont know of another way) and everything looks smooth in GChrome and Safari. Firefox and IE are the problem, as usual.

_____________________________________________________

the code is simple:

two small images:

<a href="imgs/feat/featlarge_1.jpg" target="main"><img src="imgs/feat/featsmall_1.jpg" border=0></a>

<a href="imgs/feat/featlarge_2.jpg" target="main"><img src="imgs/feat/featsmall_2.jpg" border=0></a>

when clicked, changes the main image:

<iframe src="imgs/feat/featlarge_2.jpg" width="400px" height="273px" name="main" frameborder=1 scrolling=no></iframe>

_____________________________________________________



As you can see i'm using JUST an image for the iframe source rather than a separate page, and there are margins showing up on the top and left side of the image within the frame.


everything works perfect in chrome:

but I get margins in IE and Firefox:

Is there an easy fix for this? or maybe an alternative way of switching the source image by clicking a separate link without reloading the entire page? I HATE iframes and im sure theres a way to do it with javascript or PHP, I dont know how though.

Im using PHP includes extensively on the site, but I dont think they can help me with this problem. Im also aware that iframes cause alot of problems. I just dont know of any other way to accomplish what im trying to do.

a link to the page in question: http://iwcandles.com/feat.php

 

[leroy30]

Yes, you are a fool for using frames.

Sorry I don't mean that in a nasty way I just couldn't resist!

Anyhow, why not use some javascript? For example...

your thumbnail image:
<img src="imgs/feat/featsmall_1.jpg" border="0" onclick="document.mainImg.src = 'imgs/feat/featlarge_2.jpg';">

And your main image:
<img src="imgs/feat/featlarge_1.jpg" border="0" name="mainImg" />

And you should really add a width and height to your images to help your webpage display progressive (appear to load faster)

 

[leroy30]

Oh yeah and the reason for the space is because the web page you are loading gets a margin or padding applied to it in IE. just set body css to margin:0 and padding:0 on the page you are loading inside the iframe.

But I suggest you use my example above to do away with the iframe.