Designers often try to replicate the tactile properties of real-life buttons by using rollover images to provide visual feedback when users move their mouse over the control.
This was Particularly a problem for those designers who relied upon Dreamweaver’s code writing which tended to turned what should be a simple MOUSEOVER AND MOUSEOUT event into this monster bit of code.
CSS to the rescue
But it wasn’t long before designers recognised that not only could CSS be used for image rollovers but it was actually easier, made for faster loading pages and it worked regardless of the users browser preferences.
In CSS the designer simply sets a background image for the buttons link-states, replacing the image for the :hover state e.g.
Going a step further with CSS Master Sprites
The solution was simple; compile all of the buttons image states into a single image and use the background-position property to ‘move’ the image during certain states. By allowing a specific portion of the back-ground image to show through a suitably sized container (with the overflow:hidden property), the vertical or horizontal position of the image can be changed to display the relevant portion of the background image for each link-state.
In the example above navbutton_atrest.gif and navbutton_mouseover.gif are combined into a single vertically stacked image whose vertical postion is adjusted dependent upon the navbutton’s link state with the following CSS:
Remember to also include the navigation list because these background menus can’t be seen by screen readers and mobile devices:
<li id=”Home”><a href=”http://www.#.com”>Home</a></li>
<li id=”menu2″><a href=”#.html”>Menu2</a></li>
Moving the list off screen stops them displaying on pc screens:
Of course the technique need not be restricted to page navigation menus and is often used where often repeated graphics such as icons, a good example can be seen at Nintendo’s Pokemon site here.
As a designer this elimination of loading delay opens up the possibility to combine CSS sprites with jQuery to provide even greater animation of button states normally only possible with Flash such as slide in, fade out etc – but that is the subject of a later article.