Change Image Without Reloading Page

JavaScript
1

On my website, I have a products listing page. Some of the items have more than 1 image saved against them and I would like to use a script so the user can click between images and they load up in the page without actually having to reload the whole page.

At the moment, they are loading in an iframe, but if the user views 2 or 3 of the pictures and then clicks back on their browser, it just goes through the pictures they’ve already seen.

The nuymber of and names of the pictures are in a MySQL database and the page is written in PHP/HTML, but I think this script will need to be in JS and have a while loop to give it the names of the files.

Or…

Is there just a JS bolt on so it will define an <div> area on the screen and load images into that?

The page in question is http://www.aircooledparts.co.uk/detailed.php?topcID=1&subcID=10&pID=1

Any help would be great.

Ian

2

Ajax might be helpful.

3

i found this googling http://onlinetools.org/tools/thumbomatic/
a cool scrip I would say
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_20826834.html

4

Just change the src of the large image with the new image.


var imageElm     = document.getElementById('MySuperImage');
    imageElm.src = 'NewImageSrc.jpg';