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
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.
<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.
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.
Powered by vBulletin® Version 4.2.2 Copyright © 2016 vBulletin Solutions, Inc. All rights reserved.