Help - Search - Members - Calendar
Full Version: rollover
Forums > Resource Center > Webmasters' Corner > Webmasters' Corner Resolved Topics
Smarmosaur
May 14 2009, 08:24 PM
i've been redesigning my site for a while and stuff. so i have this tab towards the top of my page that i want a simple rollover.
first, so you know what i'm talking about, link: http://rockitstudios.890m.com/v3/index2.html

the problem is that the rollover image is always showing because the original normal tab image is transparent. the background behind it also always changes, so i can't add a solid background to the normal image. how can i make the rollover image appear ONLY when it is hovered?
Mikeplyts
May 17 2009, 07:52 AM
Are you using the code like this?

CODE
<style>
.CLASS_NAME {display:block; width:###px; height:###px;
background-image:url("IMAGE_URL_BEFORE_ROLLOVER"); background-repeat:no-repeat;}
.CLASS_NAME:hover {display:block; width:###px; height:###px;  background-image:url("IMAGE_URL_AFTER_ROLLOVER"); background-repeat:no-repeat;}
</style>


If so, try using the other rollover code like this:

CODE
<style>
.CLASS_NAME {display:block; width:###px; height:###px; background-image: url("IMAGE_URL_BEFORE_ROLLOVER"); background-repeat:no-repeat; background-position:top left;}
.CLASS_NAME:hover {display:block; width:###px; height:###px; background-image: url("IMAGE_URL_AFTER_ROLLOVER"); background-repeat:no-repeat; background-position:bottom left;}
</style>

(Just make sure that the height is doubled.)
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.