Click and Replace Image

How to replace an image without reloading the whole page.

[beautykat]

Hi,

We are planning on launching a cosmetic line. This cosmetic line includes eye shadow of different shades and colors.

The product page will contain a main image and mini-images of the various shades and colors. We would like to have users click on the mini-images and change the main image accordingly. This is to be accomplished by reloading the main image only. Would someone be willing to direct me to the right piece of code. Thanks!

[tedster]

You could put the main image in an iframe area and then the links for each color would change the image that is displayed in the iframe.

If you want to do it all on one page and not use iframes, then it will take some javascript - there's no way to accomplish that with html alone that I can think of.

[BlobFisk]

Using Javascript it is just a matter of manipulating the innerHTML of a containing element to change the images...

[beautykat]

Thanks for the feedback. I believe that using frames will not be good for SEO. Looks like using js will be the way to go. I have been given a site with some information on this, hopefully it will work.