Colour Key:
- || Page Links
- a. Site Menu
- || Emphasis Only
HTML/CSS: Mock Rollovers Using CSS
CSS Mock Rollovers
by Metho.
Image rollovers have been a thorn in the side of designers for years. Previous tactics used to accomplish the rollover effect using javascript and css resulted in flickering or lagged response times, especially upon initial page loads.
Neither the javascript method of preloading images for the mouse over button states, nor the CSS method of referencing different backgrounds for a:link and a:hover states results in smooth button operation across all browsers.
There is a solution which can eliminate all lag and flickering using another approach with CSS. The tactic involves using only one image for both states of the button. The trick is to reposition the image to reflect a change of state, not load a separate image.
The added advantage of the following tactic is that it reduces the number of required connections to the server to download all media for the page to completely load; thus allowing the page to render faster.
Here's a working example of the CSS mock rollover and the image used to create the effect:
The Image used for this button:
Lets take a look at how the button is created...
...NEXT :: Page 1, 2.
