How do you swap images on same page?

How can I swap images using html

[cdgeorge]

I want to have one main image to the left of a page, with up to 10 thumbnail images running down the right of the same page. How do I best program a web page so that when I click any image from the thumbnails on the right, it replaces the main image for an enlarged view of that thumbnail?

[limbo]

Could you use iframes? When a thumbnail is clicked it loads the main image in the corresponding frame?

[benihana]

a little bit of javascript:

you can give the main image an ID, say:

<img id="main" src="...

then use something like:

<a href="#" onclick="main.src='newimage.jpg';">

on the thumbnails.

[cdgeorge]

Thanks... I will try both the iFrames and javascript methods and see how they look.

I must admit that I thought iFrames were not recommended anymore when programming a web page - and if you can avoid them, do so (not sure why though).

I also know there are CSS methods, but I am not sure how compatible that would be with older browsers.

[limbo]

The use of frames is widely discouraged, problems with spidering, orphaned pages, frame buster script compatibility..... But as far as I know Iframes don't fall under the same bracket, at least for the presentation of a slide show...

[cdgeorge]

OK that clears things up. I must admit, I did not know the difference between iframes and frames.

[cdgeorge]

The javascript method is effective and simple.. I have tried this and it seems to work fine.

Do you think I need to preload images using javascript. If so, how do I add it to the command demonstrated above?

[benihana]

sorry cdgeorge - tht little snippet is about as far as my javascript capabilities go :)

some one in the javascript forum maybe able to help.

alternatively, as a clunky work around, you could just stick all the full size images at the bottom of the page with a height and width of 1px. Or maybe even hide them with CSS - though im not sure if hidden things would actually get downloaded, it would need some testing.

[limbo]

I'm no expert either. But could you use the body tag with an onLoad attribute?

[jbinbpt]

I believe that you don't need to preload the images since you are clicking them to appear. If you were using an onMouseover then you would preload.

[benihana]

jbinbpt, i kind of a agree, but by preloading cdgeorge will get an instant response when clicking on the thumbs, and the whole thing will just seem a little more 'slick' :)

[Zaphod Beeblebrox]

With simple preload:

<script>
var i1 = new Image();
var i2 = new Image();
i1.src = "image1.jpg";
i2.src = "image2.jpg";
</scipt>

<img id="main" src="image1.jpg">
<a href="#" onclick="main.src='image2.jpg';">

[cdgeorge]

Thanks everyone again, I shall have a play. I was also thinking about using something like JAlbum or ThumbsHTML to do all the donkey graphics work for me. But with a little knowledge before-hand, I may be able to make my own JAlbum template.