This is one of my favorite CSS techniques, for two reasons: 1) it means that I can create my own rollovers without any help from dreamweaver, or by learning any ornate javascripting, and 2) the CSS code is "pee-wee" compared to the javascript.
On top of these two reasons, it just seems more logical, there are less images to keep track of, and it's very teachable. That's where you guys come in.
And on that note, let's get into it . . .
Three things to remember
- The html is nothing more than an anchor tag, or "link," with a class attached to it. The CSS will do the rest
- In the CSS, you will have a pseudo-class called ":hover." It will take care of the "rollover" state.
- And finally, we will be using the "background-position" property to make our change for the rollover state.
So, these are the main principles to remember, and as I said earlier, this technique requires less images; that's because the "normal" state and the "rollover" state become one. Here, I'll show you:
Preparing the image
Normally, when you use images for rollovers, you have two separate files—one fore each state. For example, when using Dreamweaver's menu option for rollovers, it gives you two blanks to fill out: one path for finding the "normal" or resting state image, and the other for the rollover state image. Then, when the mouse passes over the button, it automatically changes out one image for the other. This is done by the javascript which Dreamweaver generates. But it also requires additional javascript, also generated by Dreamweaver in this case, to be created in order to "preload" the image, so that the rollover happens smoothly. Well, with CSS for rollovers, this would also be true except that the two images are combined into one. That means that when the initial load for the "normal" state is made, the image for the rollover state is also loaded, since both states are the same image. That being said, here's an example of what the image might look like:
The HTML
As I said above, the HTML is quite logical. All that it really entails is the anchor tag where the button links to. It might look something like this:
<a href="home.html">home</a>
Then just add the class that does all the heavy lifting, possibly something like:
<a href="home.html" class="home">home</a>
And that's it for the HTML.
Finally, The CSS
This particular trick requires three important things in the CSS:
- Since, the CSS for this is a class, the property "display: block" must be used for the image to be viewed.
- It must have the width and height set. This will, then become the "viewable" area for the background.
- And the "text-decoration" property must be turned off, or set to "none", in other words.
With all of these things in mind, let's set up our CSS. First set up the normal state:
home {
width: 120px;
height: 30px;
background: url('images/home_btn.jpg') no-repeat top left;
}
Now, notice how the height is set to 30 pixels. This should be exactly half of your stacked image, meaning that only the top half will be seen.
Getting into the "rollover" state, we will be using a pseudo-class called ":hover". A pseudo-class is simply a modifier added to a class. They are: hover, focus, visited, active, and link. To add the pseudo-class, make another rule with the name of the original, but ":hover" added onto the end, like so:
home:hover
With the pseudo-class added, give it the property "background-position." Then, the value will be the height of the first class, but as a negative number. What this does is bump the combined image "up" that amount, which will reveal the bottom half of the image, or the "rollover" state. Note that the "background-position" has two numbers: first the left position, and second the top position. Refer below:
home:hover {
background-position: 0 -30px;
}And that's it. Your CSS rollover has been created. For use in a navigation bar, you can add positioning attributes, as well. I personally prefer to wrap them in a "navigation" div, and then position "absolute".