The first thing I did was make my images in Photoshop. I just put the first image on the top and the rollover image on the bottom. Here is the image that makes the above rollover work:
The first thing I did was make my images in Photoshop. I just put the first image on the top and the rollover image on the bottom. Here is the image that makes the above rollover work:
In it's normal state the div #menu shows the top of the background image.
In hover state it shows the bottom of the background image.
Makes for very fast CSS only rollovers (faster if your careful to make small images)
To see the CSS that makes it work, just click on View/Source.
I added a third state to the hover - it shows a different image now once you've visited the link and came back (use your browsers back button to return to this page after you click on the demo).
I have tested this in FireFox 2, Firefox 3, Firefox 3.1 beta2, Internet Explorer6, Internet Explorer7 and Internet Explorer8 beta2 so far.
