www.webdeveloper.com
Results 1 to 10 of 10

Thread: Changing a Div's background image onMouseOver

  1. #1
    Join Date
    May 2007
    Posts
    2

    Changing a Div's background image onMouseOver

    I'm sure this is a very simple script but I have very little experience in JavaScript. I am trying to learn it and I would appreciate it if you help me create this effect .

    Style.css
    Code:
    #test{
       background-image:url(images/bg1.gif);
       height:100px;
       width:100px;
    }
    and I imagine the HTML would look something like this, with the Javascript I have so far.

    Code:
    <html>
    ...
    <script type="text/Javascript">
    function changeBgImage (image , id) {
    var element = getDocumentByID(id);
    element.style.background-image = url(image);
    }
    </script>
    
    <body>
    
    <div id="test" onMouseOver="changeBgImage('images/bg2.gif','test')">
    </div>
    
    </body>
    </html>
    That's basically it. Any help is appreciated.

  2. #2
    Join Date
    Apr 2007
    Posts
    71
    Like this?

    Code:
    <html>
    <head>
    <style type="text/css">
    #test	{
    	background-image:url(images/bg1.gif);
    	height:100px;
    	width:100px;
    }
    </style>
    <script type="text/javascript">
    function changeBgImage (image, id) {
    	var element = document.getElementById(id);
    	element.style.backgroundImage = "url("+image+")";
    }
    </script>
    </head>
    <body>
    <div id="test" onMouseOver="changeBgImage('images/bg2.gif', 'test')">
    </div>
    </body>
    </html>

  3. #3
    Join Date
    May 2007
    Posts
    2
    Ah! Thank you very much!

  4. #4
    Join Date
    Nov 2007
    Posts
    1

    What about on a Mouse Exit?

    What additional script needs to be included to have it return to the original image on a mouse exit?

  5. #5
    Join Date
    Nov 2007
    Posts
    1
    Hey guys, could the above snippet be modified to work onClick and with multiple background images on one div? Ideally the background change would depend on which of a series of links was clicked.

  6. #6
    Join Date
    Feb 2009
    Posts
    22
    Quote Originally Posted by tugboat View Post
    What additional script needs to be included to have it return to the original image on a mouse exit?
    Code:
    <div 
        id="test" 
        onMouseOver="changeBgImage('images/bg2.gif', 'test')"
        onMouseOut="changeBgImage('images/bg1.gif', 'test')">
    </div>

  7. #7
    Join Date
    Aug 2009
    Posts
    2
    this code does not account for the right side of the div tag. onmouseout works for the top left and bottom sides but not the right ideas?

  8. #8
    Join Date
    Aug 2009
    Posts
    2
    nevermind, i figured it out wasn't closing my div tag haha i am a genius

  9. #9
    Join Date
    Jul 2009
    Location
    Bournemouth, United Kingdom
    Posts
    6
    Can someone tell me with using the same method, how can you remove the image as you use "onMouseOut"??

  10. #10
    Join Date
    Aug 2012
    Posts
    1

    Thumbs up more simple

    this code functions very well to change the background image

    <center class="menu" onmouseover="this.style.backgroundImage='url(images/image_2.jpg)'" onmouseout="this.style.backgroundImage='url(images/image_1.jpg)'">

    in the css the bg image must be set how 'image_1.jpg', so whem you goes with the cursor on this, it change to 'image_2'.. with the cursos goes out, it come back to 'image_1'

    very simple

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