For the uninitiated, a "rollover" here refers to the state of an object (or text) on a website that changes it's appearance when a mouse cursor rolls over it. Try hovering your mouse over the four buttons on top of this page, you will see that they change their color slightly. The reason behind doing such is not necessarily to impress people, however, it is used to provide some sort of "tactile" feedback to the visitor, telling them that something is there.

Imagine typing on a completely flat keyboard that doesn't press in or give that clicking sound. You would feel kind of weird. You don't? Oh my.

Let's get busy with our coding now, shall we?

To make this strictly a HTML-CSS medium, I would not touch Javascript-based rollover. If you don't know what is a Javascript-based rollover, never mind. Let's proceed.

Before we begin, let's take a quick look at the basic idea: To achieve the effect, we would need two images, one for the state when the image is idle, and the other is when the mouse is over the image. For this guide, I have prepared the following images:

They are two separate images, named "home-0.png" (for the idle state) and "home-1.png" (for the hover state).

In CSS, you can apply rollover to almost any element of your web page. However, we will focus on the single element that is very common - navigation links (thus the "home" button). The codes would look like this:

Check out the preview.

Brief info:
Basically what the CSS does is to change the way the browser displays the <a> tag. You will need separate IDs for each of the links, since they will be using different images. Note that in the HTML side of the code, it only defines the <a> tag, with a text as the link (in this case, it's "Home"). But where is the text? The secret here is the "text-indent: -1000%" line in the CSS. In case the web browser that does not support CSS is being used to view the site, the visitor can still click on the links - as they would appear as a normal text link instead.

Uhm.. The rollover image takes a while to load. This will give a not-so-nice browsing experience to my visitors!

Yep. Because every first time the visitor hovers over the links, the browser would have to fetch the image for the rollover. While doing so, the link would appear blank - which is very very bad!

So how do we solve this problem?

It is actually pretty simple - we force the browser to fetch the other image as well! To do this, we need to modify our image a little bit. Now instead of 2 separate images, let's glue them together to become as such:

Then we change our CSS a little bit (the HTML stays the same):

See the updated preview.

Note the changes: The background image is only defined on the initial occurrence of the ID #homelink, and then on the hover section, the position of the background is altered. Yes! Take a look at the diagram below:

The trick here is to have a background that contains both of the images in one image. Then, shift the position of this background image for the hover state. If you have noticed, the rollover effect now does not have any delay at all!

You can download the sample files too, if you wish :)

You can leave a response, or trackback from your own site.