Jump to content

changine one image by clicking antoher.


robcrozier

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!

Cheers!
Link to comment
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:
[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
Link to comment
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.
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

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.