unobtrusive, dynamic image rollovers

Rollovers are excellent usability/accessibility points. They let you know right away that this thing that changes when you go near it, is going to lead you somewhere. The problem is that the implementation doesn't fit in well with unobtrusive javascript implementation.

The solution can be quite simple when talking about navigation links or common buttons. ditch the javascript all-together because all you need is css.

This style solution is now common and based on the a:hover psuedo-class. It uses a background graphic displayed via the styling where the graphic shows both the on and off or hot and cold rollover graphic. The important factors here are that the A tag's display is only as tall as the half graphic height. This is taken care of by setting the height of the A tag to 18px where the rollover graphic's height is 36px. When someone mouses over the A link, the hover class kicks in and displays the background image starting halfway, so the top half (the off position) is hidden.

Lastly we want this to degrade nicely and read well for bots, so we place the actual link text in but obscure it.

Background-graphic:


html:
<ul id="navigation">&
<li ><a href="/some-link.html"><strong>Some link</strong></a></li>
</ul>

css:
#navigation{
height:18px;
margin:0;
padding:0;
list-style-type:none;
overflow:hidden;
}
#navigation li{
float:left;
}
#navigation li a,#navigation li a:hover{
display:block;
color:white;
padding:4px 21px 4px 20px;
text-decoration:none;
background-repeat:no-repeat;
height:18px; /* limit the A height to the first half of the graphic*/
background-position:0px 0px; /*set the background to only show the off graphic */
}
#navigation li a:hover, #navigation li.selected a{
/*on hover or selection, roll the background image to half it's height, revealing the 'on' version */
background-position:0px -18px;
}
#navigation li a strong{
visibility:hidden;
}

Example: http://www.business.curtin.edu.au/