Jump to content


changine one image by clicking antoher.

  • Please log in to reply
2 replies to this topic

#1 robcrozier

  • Members
  • PipPipPip
  • Advanced Member
  • 175 posts

Posted 04 September 2006 - 02:00 PM

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.springdig..._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!


#2 obsidian

  • Staff Alumni
  • Advanced Member
  • 3,202 posts
  • LocationSeattle, WA

Posted 04 September 2006 - 02:15 PM

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
You can't win, you can't lose, you can't break even... you can't even get out of the game.

while (count($life->getQuestions()) > 0)
{   $life->study(); } ?>
  LINKS: PHP: Manual MySQL: Manual PostgreSQL: Manual (X)HTML: Validate It! CSS: A List Apart | IE bug fixes | Zen Garden | Validate It! JavaScript: Reference Cards RegEx: Everything RegEx

#3 AndyB

  • Staff Alumni
  • Advanced Member
  • 5,465 posts
  • LocationToronto

Posted 04 September 2006 - 02:38 PM

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.
Legend has it that reading the manual never killed anyone.
My site

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users