CSS Image Rollovers
Also know as a CSS sprites, this simple CSS trick with help create image rollovers without the use of javascript or other complicated methods. It uses only a few lines of CSS and one image to achieve the desired effect. What’s the point of using one image, you ask? Well, it can save space and in my opinion, it is much easier dealing with only one image than two. Plus, it can prevent your image rollover from flickering or lagging.
Ever since I stumbled upon this, I’ve been using it for the main navigation of my layouts ever since. But enough about me. Let’s get started…
As an example, I’m going have this image:
Turn into this when I hover over it:
The first step is to merge the two images together by placing one on top of the other. The hovered image should be at the bottom, and the passive on top like so:
Let’s call this image “button.gif” and now that we’re done with that, let’s see the html code. It’s quite simple actually:
<div id="button"></div>
Now let’s dive into the CSS code. “button” is the name of the div layer that holds the rollover. The key is to use the image we created (button.gif) as the background of the element and have a background position of zero.
#button {
background: #FFF url('images/button.gif') top left no-repeat;
height: 55px;
width: 203px;
display:block;
background-position:0 0;
}
Make sure that the height and width of the button is included in your CSS. A frequent mistake I make is when I put the measurements of the whole image in my code. So be sure that you put the size of the button, not the size of the full image. Here’s a visual to show you what I mean:
After finishing the code for the div, we have to somehow make it change when we place our mouse over it. Not to worry! The magic is in these few lines:
#button:hover {
background-position:0 -55px;
}
Notice how the background position is -55px. That is the height of the button itself. By making it a negative number, we are telling the div layer to pull its background image up to show the hovered state.
And here is the end result (hover over it!):
They are a million different ways you can use this wonderful technique. Here are some useful resources: Navigation Matrix with CSS, CSS Sprites: What They Are, Why They’re Cool, and How To Use Them, The Mystery of CSS Sprites, CSS Image Maps with Sprites, CSS Sprite Generator