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 to the CF scene
    Join Date
    May 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Swapping multiple images while rollingover one image

    Hi all,

    Newbie here. I am seeking to swap out three images when rolling over one.

    Cursor hovers over one image - three new images, in different locations, are seen on screen. When cursor moves away - the images revert to "normal" state.

    Image 1 - thumbnail - bottom right of screen
    When rolling over Image 1, three images change:
    Image 1 - to shaded version of the thumbnail
    Image 2 - main image center of screen
    Image 3 - text box image top right of screen

    Any help would be appreciated!

    Thanks!

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    what is a 'text box image'?
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    Nobody ever said you could only do one thing at a time with ommouseover.

    Code:
    <head>
    <script>
    function overAll3( )
    {
        document.getElementById("image1").src = "...";
        document.getElementById("image2").src = "...";
        document.getElementById("image3").src = "...";
    }
    function outAll3( )
    {
        document.getElementById("image1").src = "...";
        document.getElementById("image2").src = "...";
        document.getElementById("image3").src = "...";
    }
    </script>
    
    ...
    </head>
    <body>
    ...
        <img id="image3" src=...>
    ...
        <img id="image2" src=...>
    ...
        <img id="image1" onmouseover="overAll3();" onmouseout="outAll3( );" src=...>
    ...
    </body>


  •  

    Posting Permissions

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