Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Feb 2005
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts

    multiple image swapping

    I debated as to whether this belonged in the JS forum or here... please move if I made the wrong decision.

    http://www.bbc.co.uk/radio4/presenters/

    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...

    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!
    Dodge

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    United Kingdom Confused: Often
    Posts
    859
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
    <img src="an_image.jpg" name="rollover">
    Then stick in your links like this:
    Code:
    <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:

    Code:
    <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...
    Last edited by redhead; 03-16-2005 at 09:24 PM. Reason: Added a few pretty colours
    redhead

  • #3
    New Coder
    Join Date
    Feb 2005
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Right - thanks for that! I was able to configure a "single" swap script to work like the link I posted.

    Thanks
    Dodge


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •