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 6 of 6

Thread: Css Rollover

  1. #1
    New Coder
    Join Date
    Aug 2009
    Posts
    51
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Css Rollover

    url: http://devious-design.co.uk/final_test2.html

    Basically when the user hovers over the Facebook and Twitter button I want that icon to change to another image of the same thing but coloured.

    I currently have those buttons within a div tag and the images within the div were added via html. I tried several times already and failed miserably.

    I'm pretty close to ripping my hair out on this one i'm either blind or just going about solving this problem completely wrong!!

    any advice you can give me?

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Try this

    Code:
    <img src="images/facebook.png" width="64" height="64" alt="Facebook link" onmouseover="this.src='images/Facebook_hover.png'" onmouseout="this.src='images/facebook.png'" />

  • #3
    Regular Coder
    Join Date
    Aug 2006
    Location
    Cardiff, UK
    Posts
    141
    Thanks
    15
    Thanked 2 Times in 2 Posts
    I'd put the icons in CSS and change them that way. Something like (although this is off the top of my head and not tested)

    Code:
    <div id="socialmenu">
    <ul>
    <li id="facebooklink"><a href="http://facebook link">Facebook</a></li>
    <li id="twitterlink"><a href="http://twitter link">Twitter</a></li>
    </ul>
    </div>
    Code:
    div#socialmenu ul {
    }
    div#socialmenu li {
    display: inline;
    padding-right: 5px;
    }
    div#socialmenu li#facebooklink a {
    background:transparent url(path to icon) no-repeat left top;
    height:32px;
    text-decoration:none;
    text-indent:-9999px;
    width:32px;
    }
    div#socialmenu li#facebooklink a:hover {
    background-image:url(path to coloured icon);
    }
    div#socialmenu li#twitterlink a {
    background:transparent url(path to icon) no-repeat left top;
    height:32px;
    text-decoration:none;
    text-indent:-9999px;
    width:32px;
    }
    div#socialmenu li#twitterlink a:hover {
    background-image:url(path to coloured icon);
    }
    If anyone asks my boss, this counts as work, okay?

  • #4
    New Coder
    Join Date
    Aug 2009
    Posts
    51
    Thanks
    10
    Thanked 0 Times in 0 Posts
    thanks for the advice guys, I'll give both of those methods a go when I get the opportunity to and thank you guys accordingly

  • #5
    New Coder
    Join Date
    Aug 2009
    Posts
    51
    Thanks
    10
    Thanked 0 Times in 0 Posts
    well I've tried implementing it and got the rollover to now work which can be seen here: http://devious-design.co.uk/final_test4.html

    however the layout of the buttons are now buggered as they were meant to look like they are on this page: http://devious-design.co.uk/final_test2.html

    How do I sort this out, eerrgghh!!

  • #6
    New Coder
    Join Date
    Aug 2009
    Posts
    51
    Thanks
    10
    Thanked 0 Times in 0 Posts
    anyone? o.O


  •  

    Posting Permissions

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