1001 untold stories

Alternate rollover

biophonc -

This article is about an alternate rollover technique. It's not very popular until now, so I'll try to promote it a little bit, because I like it. The regular technique to change an image, is to use JavaScript. However: This technique requires instead of JavaScript only some CSS.

The good things about this one are:

  • no need of preloading images
  • no JavaScript required
  • you can easily provide alternate Text-Links
The main trick is, to change the background position of an image. This can be done via a hover state in css: 
#myid {
background-image: url(someImage.jpg);
background-position: top;
}
#myid:hover {
background-position: bottom;
}

The only thing you need to do, which is the extra time, you have to create and provide all roll over states in one single image. And you need to define for your �a� element a height. However, this method is kind of cool, because it works with mostly all new user agents and I like sites working without CSS, so we have to provide some alternate Text-Links. This can be done like this:

And the CSS:

#nav strong {
position: abosulte;
top: -4000px;
bottom: -4000px;
}

If you wonder about the absolute position, then let me tell you, that "display:none" is no be nice method for screenreaders and also provides some possibility for alternate positioning.

To see tis method in full effect, see this example(opens up in a popup).