www.webdeveloper.com
Results 1 to 9 of 9

Thread: Change div background on mouseover

  1. #1
    Join Date
    Jan 2011
    Posts
    6

    Change div background on mouseover

    Hi, I'm building a site for a friend and I know what I want to do, but I'm struggling to get any script to fit the bill. It's a little beyond me as it's my first foray into javascript aside from gallerys/sliders.

    My page layout is as follows:

    Body > wrapper > header > 3 columns >footer

    I want to put my links for my navigation in the 1st column div and on mouseover change the background image in the centre column div.

    the following script works well, but changes the document body background as you can see from the code.

    <!--

    // Copyright 2001 by www.CodeBelly.com
    // Please do *not* remove this notice.

    var backImage = new Array(); // don't change this

    // Enter the image filenames you wish to use.
    // Follow the pattern to use more images. The
    // number in the brackets [] is the number you
    // will use in the function call to pick each
    // image.

    // Note how backImage[3] = "" -- which would
    // set the page to *no* background image.

    backImage[0] = "fig1.jpg";
    backImage[1] = "fig2top.jpg";
    backImage[2] = "fig3mid.jpg";
    backImage[3] = "fig4bot.jpg";

    // Do not edit below this line.
    //-----------------------------

    function changeBGImage(whichImage){
    if (document.body){
    document.body.background = backImage[whichImage];
    }
    }

    //-->
    </script>

    ---------------------------------------

    and using these navigation anchors. So that each page link will have a different picture:

    <a href="#" onMouseOver="javascript:changeBGImage(1)" onmouseout="javascript:changeBGImage(0)">Change</a>

    <a href="#" onMouseOver="javascript:changeBGImage(2)"onmouseout="javascript:changeBGImage(0)">Change</a>

    <a href="#" onMouseOver="javascript:changeBGImage(3)"onmouseout="javascript:changeBGImage(0)">Change</a

    ---------------------------------------------

    However I'd also like to preload the the mouseout image as the default background image in the centre col div so it starts with an image and not waiting for the first mouse over event.

    Any help really appreciated as I have an image of how I want it to look and function and this is key to it.

    Thanks in advance.

  2. #2
    Join Date
    Dec 2010
    Posts
    63
    Did you set the background image of the center div when the page loads?

  3. #3
    Join Date
    Jan 2011
    Posts
    6

    Do you mean...

    Hi, thanks for your reply,

    In testing I tried setting the body background colour of the div to #000, like my image but the image appearing via the script was not visible on mouseover, I removed the BG color and voila the scripted images were visible again.

    My main thing is getting the image to change in the centre div as the dom path in the above code is document.body where I really need the the path to be the class or id of the centrecol.

    Thought that getelementbyId would be the solution but can't see how it would integrate into the above code, and still get the centrecol mouseout image to display on page load

    thanks

    Greg

  4. #4
    Join Date
    Dec 2010
    Posts
    63
    If I'm understanding correctly, you just need to set the background image of the center div.
    HTML Code:
    <div id="divCenter" style="background-image:url('fig3mid.jpg');">Middle Content</div>
    You can post a link to your page if you want, or just post your code here, but I probably need to see what you're seeing to understand better.

  5. #5
    Join Date
    Jan 2011
    Posts
    6

    not explaining myself well

    Hi again, thanks for your replies.

    You're not quite getting what I'm after.

    The above javascript code changes the body background image to a different one for each link hovered over and returns to a different image onmouseout.

    It works and the BG image changes perfectly.

    I want the javascript path to point to a certain center div and change the background of that div rather than the body, but I'm not sure about the paths with dom.

    try the code, just change the paths to image file:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-loose.dtd">
    <html>
    <head><script language="JavaScript">
    <!--

    // Copyright 2001 by www.CodeBelly.com
    // Please do *not* remove this notice.

    var backImage = new Array(); // don't change this

    // Enter the image filenames you wish to use.
    // Follow the pattern to use more images. The
    // number in the brackets [] is the number you
    // will use in the function call to pick each
    // image.

    // Note how backImage[3] = "" -- which would
    // set the page to *no* background image.

    backImage[0] = "PATH - TO -IMAGE GOES HERE";
    backImage[1] = "PATH - TO -IMAGE GOES HERE";
    backImage[2] = "PATH - TO -IMAGE GOES HERE";
    backImage[3] = "PATH - TO -IMAGE GOES HERE";

    // Do not edit below this line.
    //-----------------------------

    function changeBGImage(whichImage){
    if (document.body){
    document.body.background = backImage[whichImage];
    }
    }

    //-->
    </script>



    </head><body>
    <ul>

    <li><a href="#" onMouseOver="javascript:changeBGImage(1)" onmouseout="javascript:changeBGImage(0)">Change</a></li>

    <li><a href="#" onMouseOver="javascript:changeBGImage(2)"onmouseout="javascript:changeBGImage(0)">Change</a></li>

    <li><a href="#" onMouseOver="javascript:changeBGImage(3)"onmouseout="javascript:changeBGImage(0)">Change</a></li></ul>



    </body></html>



    ----------------------------

    Thanks again

    Greg

  6. #6
    Join Date
    Jan 2011
    Posts
    6

    Code being used

    Hi below is the javascript and some tester html I'm using . It works perfectly except the path points to the document.body background rather than being able to choose another path or an id or name.





    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-loose.dtd">
    <html>
    <head><script language="JavaScript">
    <!--

    // Copyright 2001 by www.CodeBelly.com
    // Please do *not* remove this notice.

    var backImage = new Array(); // don't change this

    // Enter the image filenames you wish to use.
    // Follow the pattern to use more images. The
    // number in the brackets [] is the number you
    // will use in the function call to pick each
    // image.

    // Note how backImage[3] = "" -- which would
    // set the page to *no* background image.

    backImage[0] = "PATH - TO -IMAGE GOES HERE";
    backImage[1] = "PATH - TO -IMAGE GOES HERE";
    backImage[2] = "PATH - TO -IMAGE GOES HERE";
    backImage[3] = "PATH - TO -IMAGE GOES HERE";

    // Do not edit below this line.
    //-----------------------------

    function changeBGImage(whichImage){
    if (document.body){
    document.body.background = backImage[whichImage];
    }
    }

    //-->
    </script>



    </head><body>
    <ul>

    <li><a href="#" onMouseOver="javascript:changeBGImage(1)" onmouseout="javascript:changeBGImage(0)">Change</a></li>

    <li><a href="#" onMouseOver="javascript:changeBGImage(2)"onmouseout="javascript:changeBGImage(0)">Change</a></li>

    <li><a href="#" onMouseOver="javascript:changeBGImage(3)"onmouseout="javascript:changeBGImage(0)">Change</a></li></ul>



    </body></html>

  7. #7
    Join Date
    Dec 2010
    Posts
    63
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <title>Untitled 2</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <style type="text/css">
    
    body {
    	margin: 0;
    	padding: 0;
    }
    
    #container {
    	min-width: 600px;
    }
    
    #left_col {
    	float: left;
    	width: 200px;
    }
    
    #right_col {
    	float: right;
    	width: 200px;
    }
    
    #page_content {
    	margin-right: 200px;
    	margin-left: 200px;
    }
    
    </style>
    
    
    <script type="text/javascript">
    <!--
    
    // Copyright 2001 by www.CodeBelly.com
    // Please do *not* remove this notice.
    
    var backImage = new Array(); // don't change this
    
    // Enter the image filenames you wish to use.
    // Follow the pattern to use more images. The
    // number in the brackets [] is the number you
    // will use in the function call to pick each
    // image.
    
    // Note how backImage[3] = "" -- which would
    // set the page to *no* background image.
    
    backImage[0] = "Default.jpg";
    backImage[1] = "Koala.jpg";
    backImage[2] = "Penguins.jpg";
    backImage[3] = "Desert.jpg";
    
    // Do not edit below this line.
    //-----------------------------
    
    function changeBGImage(whichImage){
    var bg = backImage[whichImage]
    document.getElementById("page_content").style.backgroundImage = "url(" + bg + ")";
    }
    
    //-->
    </script>
    
    </head>
    
    <body>
    
    <div id="container">
    	<div id="left_col">
    	
    	<ul>
    
    <li><a href="#" onMouseOver="changeBGImage(1)" onmouseout="changeBGImage(0)">Change</a></li>
    
    <li><a href="#" onMouseOver="changeBGImage(2)"onmouseout="changeBGImage(0)">Change</a></li>
    
    <li><a href="#" onMouseOver="changeBGImage(3)"onmouseout="changeBGImage(0)">Change</a></li></ul>
    	
    	</div>
    	<div id="right_col">
    	Right Content
    	</div>
    	<div id="page_content" style="background-image:url('Default.jpg');">
    	Middle Content
    	<br /><br /><br /><br /><br /><br />
    	</div>
    </div>
    
    </body>
    
    </html>

  8. #8
    Join Date
    Jan 2011
    Posts
    6

    Beyond the call of duty

    Geez Nick, many many thanks, way beyond what the call of duty!!! Spot On.

    I've done some formatting and got it bang on how I want. Many Many thanks.

    I owe you a beer.

    Only last thing is getting a default background image to appear in the centre div when the page loads and then that image be changed on mouse over. Can't seem to get that to work. Ideas???


    You genius man!

    Thanks

    Greg

  9. #9
    Join Date
    Jan 2011
    Posts
    6

    All sorted-Perfect

    Many thanks Nick, for all your help. I've now sorted iot all and working exactly as I hoped. Big thanks.


    Greg

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles