CSS Rollovers
While JavaScript is very useful, I have found that pure CSS rollovers are much more effective. This is especially the case when you want to send out an email with a rollover image as many email clients do not permit JavaScript but will permit CSS. Here is an example of how this simple, yet effective technique works.
So how was this done? I’ll explain this as best I can in three parts.
Part 1: Preparing the image
This is the most important step, because you need to make sure your images are correct or the shifting will not work as intended. This example will be using a rollover that is 15 pixels high. So, as there is a default and rollover instance, the image will contain two images, each 15 pixels high, saved inside a single gif that is 30 pixels high.
Part 2: Preparing the HTML
<div id="icons">
<ul>
<li id="icon-fox">
<a href="http://www.mozilla.org/products/firefox">FireFox</a>
</li>
</ul>
</div>
We firstly need to create a DIV with an ID referenced in your stylesheet below (named icons in this example) to house your images inside. This helps with setting the positioning and height/width requirements. In this example, an unordered list LI is being used to represent each of the rollover images, though an inline IMG tag could have been used as well.
I prefer using unordered lists as it is easier to make a group of buttons and change the orientation of the list. Each of the LI elements will need to have an ID defined inside your stylesheet as well or nothing will be displayed other than text. In this example, the LI item is named icon-fox, as it is an image for Firefox, the best browser. So, now let’s look at the stylesheet.
Part 3: Preparing the stylesheet
<style>
UL { padding:3px; margin:0px; }
#icons {height:15px;margin:0px;padding:3px;width:80px;}
#icons li {display:inline;}
#icon-fox a {background:url(icon_firefox.gif) no-repeat 0px 0px; float:left;height:15px;margin:0px;width:80px;}
#icon-fox a:hover{background-position:0px -15px;}
</style>
As we can see, we have the two above mentioned ID instances in our stylesheet, #icons and #icon-fox. The UL declaration is just there to remove excessive padding around UL elements. #icons describes the style for the DIV element, while #icons li describes the style for all LI elements inside a UL contained in the #icons DIV. The second declaration, #icon-fox assigns an image to the A element inside the LI element.
The next statement, #icon-fox a:hover is where all the ‘magic’ happens. It simply shifts the top position of the image, and masks out the rest of the image, based on the height specification inside the #icon-fox declaration.
It’s as easy as that! This method is extremely easy once you understand how it works and the advantages of loading speed and not using javascript will be clear to you as well. I first read about this technique a fair while ago at A List Apart. This is a site every web developer should visit at least monthly.