View Full Version : iframes and swap image behaviour

02-09-2006, 05:52 PM

I've created a few sites now but my knowledge of HTML is still basic.

What I want to do is this:-

A table with two rows, the top row of which contains an image with the id main.

In the lower row I have an iframe which brings in thumbnails of photos, when I click the thumbnails in the iframe window I want the main image to change accordingly.

If this was just all in one page I could of course just use the swap image behaviour but how do I get around the fact that the tumbnails are conatined within a separate page and only brought together using the iframe.

Someone told me this can be done with java script but does anyone know how or can dreamweaver do this??

Any help would be much appreciated but could you please make your answers fool proof as I'm new to coding.

Thanks in advanced.


Creative Insanity
02-09-2006, 06:30 PM
Give your iframe a name then on your thumb links target them to the iframe name and they will load into the iframe.

02-09-2006, 10:52 PM
thanks mate.

The thumbnaills are already in the i frame its the image above them that needs to change,

along the bottom of the screen I have an iframe that contains a page full or thumbnails that scrolls horintally across the screen. above this I have an image that I want to change by click on the thumbnails.

how do i do that?

please help me i need to do this for work.

02-10-2006, 07:45 AM
let me understand this better

your thumbs are in the iframe and your image is in the parent yes?

02-10-2006, 07:59 AM
yes thats right mate. The iframe runs along the bottom of the page containing thumbnails of products. When these are clicked on I want the image in the parent page to change accordingly.

Please help as soon as you can my dead line is looming.



02-10-2006, 09:06 AM
wrap your images in parent in a <div> and give it an ID
<div id='image1'> <img src = bla bla /> </div>
<div id='image2'> <img src = bla bla /> </div>
<div id='image3'> <img src = bla bla /> </div>

then your thumbs need to fire a js function


function swapper(t){
a = parent.getImageById('image1');
b = parent.getImageById('image2');
c = parent.getImageById('image3');

switch (t){

case '1': a.innerHTML = 'newjpg1.jpg />"'; break;
case '3': c.innerHTML = '<img src="newjpg3.jpg />"'; break;