...

View Full Version : Css Rollover



snowdude2004
07-21-2011, 10:35 PM
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?

vikram1vicky
07-22-2011, 10:04 AM
Try this



<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'" />


:)

butlins
07-22-2011, 11:48 AM
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)


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




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);
}

snowdude2004
07-22-2011, 05:41 PM
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 :)

snowdude2004
07-28-2011, 02:47 PM
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!!

snowdude2004
07-29-2011, 06:52 PM
anyone? o.O



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum