View Full Version : multiple image swapping

03-16-2005, 04:47 PM
I debated as to whether this belonged in the JS forum or here... please move if I made the wrong decision. :)


I would like to have a similar effect on our personalities page. Hovering over the presenters' names swaps a transparent image with the image of the particular presenter... but have the ability to choose which of multple "boxes" to display that image.

I search the web for this scipt but only managed to find single swaps - I may not have used the right keywords... :confused:

I would appreciate any help in either finding out the correct "title" for this script (so I can continue the search) or for an actual link to it.

Thanks so much!

03-16-2005, 08:19 PM
Probably the JavaScript section - but not to worry.

Well... say you had one image, and you wanted to be able to mouse over a link and change it you'd put in the image like this, adding a name attribute to it so you can reference it later when you are changing it for another image:

<img src="an_image.jpg" name="rollover">
Then stick in your links like this:

<a href="monkeys.html" onmouseover="document.rollover.src='monkeys.jpg';" onmouseout="document.rollover.src='an_image.jpg';">monkeys</a>
<a href="elephants.html" onmouseover="document.rollover.src='elephants.jpg';" onmouseout="document.rollover.src='an_image.jpg';">elephants</a>
and the onmouseover/onmouseout things will change the image.

It's pretty much the same if you want to change multiple images, just choose which image you want for each link when you are writing the javascript that will do the swappin'... like so:

<img name="box1" src="an_image.jpg">
<img name="box2" src="an_image.jpg">
<img name="box3" src="an_image.jpg">

<a href="monkeys.html" onmouseover="document.box1.src='monkeys.jpg';" onmouseout="document.box1.src='an_image.jpg';">monkeys</a>
<a href="elephants.html" onmouseover="document.box3.src='elephants.jpg';" onmouseout="document.box3.src='an_image.jpg';">elephants</a>
<a href="pandas.html" onmouseover="document.box2.src='pandas.jpg';" onmouseout="document.box2.src='an_image.jpg';">pandas</a>
<a href="penguins.html" onmouseover="document.box3.src='penguins.jpg';" onmouseout="document.box3.src='an_image.jpg';">penguins</a>

And just change the document.box3.src='elephants.jpg'; for the name that you've given the particular box whose image you want to change.

Is this any help? I apoligise if there are mistakes, I'm not much of a javascript kid myself, but I'm sure others will correct me if I've done anything wrong...

03-17-2005, 11:04 AM
Right - thanks for that! :) I was able to configure a "single" swap script to work like the link I posted.