CSS Image rollovers with active state

Use an "image replacement" technique of your choice to change, or more correctly, reveal the background graphic for the rollover (hover) state and the "sliding door" technique for the onclick (active) state

Although you can use the sliding door technique alone to achieve the same effect, it doesn't result in the same degree of accessibility as this example.

Works as expected on:

  • Safari 2.0 (OS X)
  • Firefox 1.04 (OS X)
  • IE 5.2 (OS X)
  • Opera 7.5 (OS X)
  • Firefox 1.04 (Win 2000)
  • IE 6 (Win 2000) - Doesn't clear click state
  • ...meanwhile back at the ranch