changine one image by clicking antoher.

[robcrozier]

Ok does anyone know how i can make one image on a page change by clicking on another?  Theres an example of what im trying to achieve here : http://www.springdigital.co.uk/portfolio/small_business.php.  Notice how the main (large) picture changes when you click on the smaller ones.  Its probably a pretty easy bit of coding but i just cant get my head around it!

Any help would be great!

Cheers!

[obsidian]

first thing you need to do is check into javascript preloading images. once you've got that part done, and you have all your images you'll be trying to change to preloaded, you're ready to go. next, you need to use the same technique you would on a rollover image, but use it onclick instead. if you write your function in such a way as to pass it the id of the image or div you are targeting, that's a great help. for instance:
[code]
function changeImage(newImage, target) {
  // define the target image
  x = document.getElementById(target);
  x.src = newImage.src;
}
[/code]

that's really all there is to it. of course, your "newImage" variable would be one of your preloaded images that you'll pass into the function and "target" is the id of the image you are wanting to change.

hope this helps

[AndyB]

Just a minor caveat.  Nice though that example page is, it's over 600kb in total. That's the kiss of death to any visitor who happens to be on a dial-up line (and those people really still exist and are potential customers).  Pre-loading is exactly that ... it loads ALL the images whether anyone wants to see them or not.  Use it wisely and consider ALL your site visitors.