PDA

View Full Version : [CSS] Simple image rollover effects



Tigger2
06-24-2008, 09:36 AM
1) CODE TITLE: Simple CSS based image rollover effects

2) AUTHOR NAME/NOTES: Anthony McCreath

3) DESCRIPTION:
Have an image change when hovering over it, without using javascript

4) URL TO CODE:
http://www.mccreath.org.uk/Article/Simple-CSS-based-rollover-effects_6.aspx

Nile
06-25-2008, 03:34 AM
I guess this is Ok. But it'd be better using javascript.

romano
12-17-2008, 11:56 AM
I usually use this code, it works on every browser and has no preload problems, plus it's really simple: :D



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

puffnstuff
11-01-2009, 12:12 PM
I tried the above, and it works in every browser EXCEPT I.E.