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 4 of 4
  1. #1
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Change DIV BG Image On Hover

    I'm having trouble changing a DIV background image when it is hovered over - is there an easy way?!

  • #2
    Senior Coder chilipie's Avatar
    Join Date
    Jul 2004
    Location
    Shrewsbury, UK Age: 16
    Posts
    1,117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    div {
    background: #hex123 url(back.gif);
    }
    
    div:hover {
    background-image: url(backhover.gif);
    }

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Okay so ollie gave you the way that would work in any other browser but IE. You might want to use the javascript way to ensure that it will work in IE if of course javascript is enabled.
    Code:
    <div onmouseover="this.style.background='url(yourimage.jpg)';" omouseout="this.style.background='url(youroriginalimg.jpg)';"></div>
    EDIT: Sorry I forgot the single quotes, that is why it wasn't working.
    Last edited by _Aerospace_Eng_; 05-20-2005 at 10:37 PM.

  • #4
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, but why am I getting an error with -

    Code:
    <div id="startbutton" onmouseover="this.style.background=url(Start_Hover.JPG);" onmouseout="this.style.background=url(Start_Off.JPG);">
    </div>
    EDIT: No worries - working now!
    Last edited by mark87; 05-20-2005 at 09:54 PM.


  •  

    Posting Permissions

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