Lamtha2 Logo
01296 768182

Web Design

Ecommerce

SEO Marketing

Our Work

Image rollovers – Javascript vs CSS vs master sprite images

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.

Initially this was done with Javascript but this created three problems;

  • Firstly if the user had disabled javascript it simply would not work and in the case of navigation this might result in paerts of the website being inaccessable.
  • Secondly search engines had trouble negotiating these javascript menus.
  • Thirdly, the javascript code could add significantly to the page size.

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.

Pre-loading the rollover images, putting the javascript code into an external file and ensuring it loaded after the page had loaded all helped for a time.

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.

.navbutton {
background-image: url(../images/navbutton_atrest.gif);
width:109px;
height:70px;
}

.navbutton:hover {
background-image: url(../images/navbutton_mouseover.gif);
}

Going a step further with CSS Master Sprites

Today things have moved on again. Once the elimination of Javascript had reduced page sizes some designers looked to refine their CSS rollovers to also remove the small loading delays caused as the users browser makes additonal calls to the server to serve the over state image.

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:

.mainnavbtn {
background-image: url(../images/navbutton_sprite.gif);
background-position:0 0;
width:109px;
height:70px;
overflow:hidden;
}

.mainnavbtn:hover {
background-position:0 -70px;
}

Remember to also include the navigation list because these background menus can’t be seen by screen readers and mobile devices:

<div id=”navbar”>
<ul>
<li id=”Home”><a href=”http://www.#.com”>Home</a></li>
<li id=”menu2″><a href=”#.html”>Menu2</a></li>
etc
</ul>
</div>

Moving the list off screen stops them displaying on pc screens:

#navbar a{
text-indent:-5000px;
}

Examples

You can see an example of a simple two button state master sprite image hereand a more complete version used on Apple’s website here.

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.

Summary

CSS background image replacement provided a solution to some of the problems associated with Javascript menus. CSS master sprite images go one step further by not only eliminating the delay for image states to download, they also work when Javascript is turned off and reduce the number of HTTP server requests which can be a consideration for high traffic websites.

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.