PDA

View Full Version : iframes and swap image behaviour


Ricky55
02-09-2006, 05:52 PM
Hi

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.

Ricky55

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

Ricky55
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.

davidj
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?

Ricky55
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.

Thanks

Ricky55

davidj
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

thumbs...
thumb1.jpg
thumb2.jpg
thumb3.jpg


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;

}
}