Howto create CSS Image Rollovers effect wihout using Javascript

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]

Author: admin

I like chocolate, gadgets, open source software, photography, traveling and all shades of green colors. I love spending time with fun loving friends and family members. This is my own online journal.

5 thoughts on “Howto create CSS Image Rollovers effect wihout using Javascript”

  1. Glad that it helped. I love this effect and its so much easier and cleaner than using javascript.

  2. 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>

Leave a Reply

Your email address will not be published. Required fields are marked *