After covering the long and short of using CSS for mouseover graphical navigation, I was clued into a similar but vastly more efficient way of doing the same thing with less overhead. Why cut up all those images when we can just use one?
Here’s what I’m talking about:
Look familiar?
Notice the second line of navigation there mirroring the first? That’s all the mouseovers. The trick is simply to position this image as we need it.
So, here’s the HTML:
<div id="header">
<ul>
<li id="nav_01"><a href="http://paul.bagosy.com">Home</a></li>
<li id="nav_02"><a href="/about/">Home</a></li>
<li id="nav_03"><a href="/resume/">Resumé</a></li>
<li id="nav_04"><a href="/portfolio/">Portfolio</a></li>
<li id="nav_05"><a href="/contact/">Contact</a></li>
<li id="nav_06"><a href="/feed/">Subscribe to Feed</a></li>
</ul>
</div>
Pretty much the same concept as before.
Now, we get into the CSS:
#header { width:946px; height:172px; background:url(images/header.jpg) top center no-repeat; position:relative; }
#header ul { width:946px; height:172px; margin:0px; padding:0px; list-style:none; }
#header ul li { margin:0px; padding:0px; list-style:none; position:absolute; }
#header ul li a { text-indent:-9009px; display:block; width:100%; height:100%; }
#header ul li a:hover { background-image:url(images/header.jpg); background-repeat:no-repeat; }
What’s important here is that we’re defining the background-image and background-repeat separately in the a:hover declaration, and they’re going to be the same for every link. Granted, you probably don’t need the background-repeat, but it’s good to be thorough.
Now that we’ve defined the overarching styles, let’s do the individual links:
#nav_01 { width:103px; height:57px; left:45px; top:100px; }
#nav_01 a:hover { background-position:-45px -172px; }
#nav_02 { width:113px; height:57px; left:148px; top:100px; }
#nav_02 a:hover { background-position:-148px -172px; }
#nav_03 { width:122px; height:57px; left:261px; top:100px; }
#nav_03 a:hover { background-position:-261px -172px; }
#nav_04 { width:154px; height:57px; left:383px; top:100px; }
#nav_04 a:hover { background-position:-383px -172px; }
#nav_05 { width:136px; height:57px; left:537px; top:100px; }
#nav_05 a:hover { background-position:-537px -172px; }
#nav_06 { width:227px; height:57px; left:673px; top:100px; }
#nav_06 a:hover { background-position:-673px -172px; }
With each of the list items, we’re just telling them how big to be (width, height) and where to be (left, top). We’ve already told the anchor tags to fill their space above, so we just need to worry about the hover. Since we’ve already told them what image to use (the same as the header background), all we need to do is tell them where to put it. We set the background-position to show the mouseover portion of the image by defining it in negative terms (x first, y second).
For this example, we’ve got an image that’s 229 pixels tall, 172 pixels of which will be visible as our header. So, the y part starts at 172 pixels, which means we need to drag it -172 pixels up for each of our mouseovers. Then, it’s as simple as grabbing our left positions for the list item and moving it that far to the left.
Bingo, instant mouseovers with one image. Instead of seven server calls and the need to preload (header BG and six mouseover images), we’re doing one server call and as soon as the header shows, your mouseovers are already preloaded!