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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Background Image change on rollover

    I'd like to create a similar page to this http://thelittleblackjacket.chanel.com/en_CA/home
    (once the page loads click skip on the bottom)

    Its the page with the 4 buttons that changes background when you rollover a button.

    Anyone know how this can be achieved?

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,174
    Thanks
    23
    Thanked 601 Times in 600 Posts
    The site you sent us to is very complex, but if all you want is to change the back ground image use this. If you have a lot of images think about using a switch.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    body{
    	background-image: url('images/GreenDragon.jpg');
    }
    </style>
    <script type='text/javascript' src='javascript/jquery.js'></script>
    <script>
    function changeIt(back) {
    	
    if(back == 1)
      document.getElementById("main").style.background = "url('images/BamburghInNorthumbria.jpg')";
     else if(back == 2)
      document.getElementById("main").style.background = "url('images/harleytoplogo.png')";
    }
    </script>
    </head>
    <body id="main">
    <ul>
    <li><h1 onclick="changeIt(1);">One BackGround</h1></li>
    <li><h1 onclick="changeIt(2);">Different BackGround</h1></li>
    </ul>
    </body>
    </html>
    Install your images.

    Just saw the ON ROLL OVER. change the onclick to onmouseover.
    Last edited by sunfighter; 04-13-2013 at 03:55 PM. Reason: Just saw the.....
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Posting Permissions

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