i got the idea for this approach to a CSS Rollover awhile ago when i saw a posting over at Mezzoblue about another approach to encapsulating non-visible content inside a site header, such as with an <H1> tag... so, thinking along the same lines, i figured i could apply this trick to CSS Image Rollovers, such as those popularly used in main menus, etc...
the idea here, tho, is to create a single background image and reposition it for the mouseover. the benefit here being that the browser doesnt need to load a seperate image for the mouseover, since it's a single image that's already loaded.
Part II: The CSS
div#menu001 a {
width: 120px;
height: 24px;
display: block;
background: url(bkg-cssrollover.gif) no-repeat;
overflow: hidden;
text-align: center;
text-decoration: none;
padding: 3px 0 0;
margin: 3px 0;
font-family: tahoma,arial,verdana,sans-serif;
font-size: 11px;
color: #666
}
div#menu001 a:hover {
background-position: -125px 0;
color: #3186CC
}
the CSS is pretty straight forward, especially if you're already familiar with the general method used with image rollovers (via CSS), with one exception... on the a:hover we reposition the background image to -125px so you'll see the second half of the image when you mouseover the menu item.
the image i'm using here is 245px wide, 120px width per menu button with a 5px space inbetween (hence the -125px value). here's the image i'm using:
to use this in your webpage, you'd simple use something like this in your HTML:
<div id="menu001">
<a href="" title="">Homepage</a>
...
</div>
which looks like this:
....and that's it! there seems to be a slight 'flicker' under IE6/Win, but it seems to work fine under IE6 and Mozilla Firebid.
