This is the first in a multi-part series on different rollover techniques. I’ve developed a few techniques over the years, and I’d like to share a few of them. There are two factors that make a great rollover button: speed and browser coverage. You can achieve both through the use of a sprite.
A sprite is a single image that contains imagery for both the regular and rollover versions of your button (you can also include a selected state). Often a .gif file works great because you will be using the same set of colors for all of your buttons, thus keeping the file size relatively small. With a sprite, a single image is downloaded to the browser, meaning only one http request is made for all of your menu’s buttons. If you’ve ever moused over a button on a website and noticed a half second lag before the rollover image appeared, its because that image was not requested by your browser until the moment you rolled your mouse over the link. The lag was the time it took to request the file and download it to your screen. Using a sprite means once the image is downloaded, you have everything you need right out of the box. And no Javascript is required. Using a sprite is all about CSS.
Here is an example of a sprite (before any CSS is applied):
Each row of navigational items is 50 pixels tall. To make this example as simple as possible, I’ve also divided each link so they are 100 pixels wide.
Let’s assume that our HTML for this navigation looks like this:
<ul id="menu"> <li class="link-1"><a href="/home/">Home</a></li> <li class="link-2"><a href="/products/">Products</a></li> <li class="link-3"><a href="/services/">Services</a></li> <li class="link-4"><a href="/contact/">Contact</a></li> </ul>
So, lets make this unordered list go horizontal using a little CSS:
#menu { height: 50px; margin: 0; padding: 0; list-style: none; } #menu li { display: inline; margin: 0; padding: 0; } #menu a { float: left; width: 100px; height: 50px; display: block; }
This gives us a menu that looks similar to this (my example is inheriting a few styles from the current Wordpress theme):
Now to the fun part, positioning the sprite. Let’s add a few more styles to the anchor tag in the menu. Giving a negative text indent and adding “overflow: hidden” will send the anchor text out of sight, leaving room for our sprite to come into play.
#menu a { float: left; width: 100px; height: 50px; display: block; text-indent: -500em; overflow: hidden; background-image: url(images/sprite.gif); background-repeat: no-repeat; }
Next we add styles for each of the buttons:
#menu li.link-1 a { background-position: 0px 0px; } #menu li.link-1 a:hover { background-position: 0px -50px; } #menu li.link-2 a { background-position: -100px 0px; } #menu li.link-2 a:hover { background-position: -100px -50px; } #menu li.link-3 a { background-position: -200px 0px; } #menu li.link-3 a:hover { background-position: -200px -50px; } #menu li.link-4 a { background-position: -300px 0px; } #menu li.link-4 a:hover { background-position: -300px -50px; }
And here is the final result:
So that is your basic technique for using a sprite for image rollovers. You’ve probably seen this before, but I wanted to lay the groundwork in my first post of the series. Stay tuned next week, as I will dive into a technique I don’t think you’ve seen before.
For an advanced example of this technique that uses absolute positioning, checkout the menu in the header of Learn About Web.
