Wow, this tutorial is pretty simple. I was looking for something like this for my small project. This CSS code gives the same effect as with a JavaScript rollover except users dont need JavaScript and you only have to load a single image.
I really hate having to use JavaScript for image rollovers as it seems messy, requires two separate images and can only degrade gracefully to nothing if the user has JavaScript turned off.
CSS Image Rollovers [redvodkajelly.com]
Glad that it helped. I love this effect and its so much easier and cleaner than using javascript.
Thanks for sharing this tutorial :)
@Jacob, I’m looking to see more tips from you :)
@Swata, NP
This is the easiest method:
<style>
img.nohover {border:0}
img.hover {border:0;display:none}
A:hover img.hover {display:inline}
A:hover img.nohover {display:none}
</style>
<A HREF=”#”>
<img src=”b1.gif” class=”nohover”>
<img src=”b2.gif” class=”hover”>
</A>
this method is the best that i have come across! Thanks for sharing this