CSS Rollover Images - No Preload Required
CSS Rollover Background Images - No Preload Required
[Part One]
Demo menu
This example aims to "real-world" the theory of using the CSS background-position property to create CSS Image Rollovers, and to explain some of the issues I found while trying to make it work.
- Summary of theory:
- To use only one background graphic so the image will always be there, then move it around, as required, by specifying a different background position in the CSS for each of the "states" (
:link, :visited, :active, :hover) of your<a>elements.
Note: Just to be clear: the menus at the right side of the screen are the test area: only the first few links in those menus at the side actually take you anywhere so you can test the a:visited state. Please use your browsers back button to come back to this page.
Avoid the "flicker", Get Instant Rollovers
The good news is it does work! and quite well at that, it's just that sometimes there will be some maths involved and one of the examples works better than the other...
Lets cover the general code first
Some Code:
#linksV a, #linksH a {
display: block;
width: 100px;
padding-left: 25px;
line-height: 25px;
min-height: 25px;
text-decoration: none;
}
The code above is the general styles that apply to both menus. The left padding is required in the links to "show" the background image. I would've liked to use text-indent: 25px; instead of padding in order to avoid the IE Box Model problem, but it doesn't indent the text when it goes over to multiple lines. I used an IE conditional statement instead to give the menus the correct width in IE.
<!--[if IE]>
<style type="text/css" media="screen">
#linksV a, #linksH a {
width: 125px;
}
</style>
<![endif]-->
OK, enough of the general stuff lets get to the juicy bit :: Read Part Two »»
«« tanfa :: CSS Index | tanfa :: CSS Examples Index »»
Credits: The inspiration for this example came from Petr Stanicek [aka -pixy-].