CSS Rollovers
It is well known that we users are far happier with an application if we feel we are actually in control of it. Providing instant feedback when interacting with an application makes for a snappy interface and gives us that nice warm feeling that the app is doing that which we requested.
In any application, and especially a web or intranet application, rapid feedback to user operations is essential. One of these things is the popular JavaScript rollover to show a different image when the cursor rolls over a button. This is desirable, but has a few drawbacks. Namely, each image must be separately sliced (multiplying any later modifications to be done) and each image must be preloaded to avoid the inherent latency when fetching the images from the server.
Another way to provide visual feedback of image based navigation, without using JavaScript, and still be accessible when needed is to use CSS rules. The navigation buttons shown here have all their states (normal, hover, selected and disabled) combined in a single image file. We then apply a CSS rule to position the image behind the link to generate a button. That is, each button uses the exact same multi-image file for each of its states.
Each button is defined as a list item in a horizontal list and uses the combined image for its background, which is positioned by CSS to show the interaction context.
The HTML to display the list is straightforward.
<div id="rollover">
<ul id="button">
<li id="up"><a href="up/" title="Up">Up</a></li>
<li id="down"><a href="dn/" title="Down">Down</a></li>
<li id="left"><a href="lf/" title="Left">Left</a></li>
<li id="right"><a href="rg/" title="Right">Right</a></li>
</ul>
</div>
To set the state of a button to selected or clicked, the ‘ul’ element has its class attribute set to the ‘li’ id of the required button. For example, to display the left button as selected, set the ‘ul’ class attribute
<ul id="button" class="left">
and the corresponding CSS
ul#button, ul.left li#left {background: transparent url(/img/buttons.gif) -160px -60px no-repeat;}
To highlight a button when the cursor moves over it, the CSS defines the link hover attribute to position the highlighted image
#up a:hover {background: transparent url(/img/buttons.gif) 0px -30px no-repeat;}
A button can appear to be disabled by setting the class attribute of a list item
<li id="left" class="disabled">
which displays the grayed out button image. For both the disabled and selected states, the width of the link is set to zero, so clicking on a button with those states has no effect.
This simple example gives a quick demo of the effect the can be achieved. The complete CSS file contains all the positioning info for the buttons.
July 2004