What you will learn:
- What a rollover is
- How to create a rollover using CSS
- How to prepare an image for a CSS rollover
Rollovers
Most of you already know what a rollover is. It is a button that, when passed over by a cursor, gives some indication that it is clickable. The button below, is an example of a rollover:
So, that's what a rollover is. Now, how do we make one? There are various ways to do this. One of them is to use javascript. But this creates a lot of code and most of you probably have no clue where to start. You could use dreamweaver: It has a function built in that creates the javascript for you. But that doesn't fit our "dreamweaver-free" model very well, now does it? So, we're going to do it using CSS, which one of the reasons why it is so great is because it doesn't come with the same level of "code bloat" that javascript does.
CSS Rollovers
There are a few different ways to do rollovers with CSS, but what I'm about to show you is my favorite way, and, I think, the simplest and most straight-forward. Plus, it seems to be one of the most reliable. Webcredible contains a tutorial for a second type, great for search engine optimization, if you're interested.
Preparing the image
The best way to do a CSS rollover image is to use a "combined image". A combined image is one that contains both the normal state and the rollover state, all in the same image. This prevents the need for a "preloading" of any images. Below is the image file that I used for my example rollover button from above:
The HTML
The reason that I like this technique so much is because all that you have in the HTML is a simple anchor (link) tag with a class attached to it:
<a href="whereYouWantTheUserToGo" class="aButton"></a>
From there, the CSS does the rest.
The CSS
First off, there are three things that are required in the CSS for this technique to work:
- The class must be displayed as a block element; otherwise, the image won't appear.
- the height and width must be established—this will become the "viewable space" for the image; since the image is a combined image, the height should be exactly "half" of the total image height, as to show only the top half.
- use the css property "background-position" to reposition the image for the hover state. This value will have a "negative" number, because it is pushing the image "up". Also, it contains two values: one for the left and one for the top. Example:
- background-position: 0 35px;
With the main concepts out of the way, let's write the actual CSS rules:
- First, establish a class name for the selector. Use something that relates to the button, such as "home" for a home button.
.home { } - Display the class as a "block" element, so that the image will be displayed.
.home {
display: block;
} - Then, fill in the height and width of the viewable image area. For an image stacked like the example above, the width would be the actual width of the image, and the height would be exactly one-half of the image's height.
.home {
display: block;
width: 120px;
height: 35px;
} - Finally, attach the appropriate image, as follows:
.home {
display: block;
width: 120px;
height: 35px;
background: url('image_path_goes_here.jpg') no-repeat top left;
}Notice that we also tell the image not to repeat and position it in the top left. This is not necessary, but may prevent bugs in some browsers.
The first part is done. Now, we need to tell it what to do when someone mouses over the button. To do this, we will need what's called a "pseudo-class". A pseudo-class is added information given to a selector. The particular pseudo-class that we are looking for is called :hover. Here's what we do with it:
- First make a new rule with the same name as the first, and add the "hover" pseudo-class in front of it, like so:
.home:hover { }
- Now, anything that we add to the "home:hover" rule will build upon the original "home" class, so all that we add is what will change on a "hover". And what will change is the position of the background image from seeing the top to seeing the bottom. This is done by giving the top position a "negative"value, thereby, bumping the image up halfway to reveal the lower half:
.home:hover {
background-position: 0 -35px;
}
- Notice, that you still need to have two values for the background position: one for the left and one for the top.
Finally, add the class name to the anchor tag, if you haven't already. The HTML might look something like this:
<a href="whereYouWantTheUserToGo" class="home"></a>
That's it. Your CSS rollover is ready.
[Next]
