Jump to content


This topic is now archived and is closed to further replies.


changine one image by clicking antoher.

Recommended Posts

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!


Share this post

Link to post
Share on other sites
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:
function changeImage(newImage, target) {
  // define the target image
  x = document.getElementById(target);
  x.src = newImage.src;

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

Share this post

Link to post
Share on other sites
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.

Share this post

Link to post
Share on other sites


Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.