Laith Zraikat : Implementing Image rollover using CSS

Using Css makes your life easier when you want to make changes to your design and helps you think in an Object Oriented manner when designing.A friend of mine asked me to explain how to create a roll-over effect without having to use any JavaScript, so I wrote this for him an thought it's worth sharing.

This tip only works in FF. For IE you'll have to do just a little bit of JavaScript.

To use CSS only in FireFox:

CSS:

.Icon
{
background: url(http://laithz.jeeran.com/blogimages/bul3.gif);
}

div:hover.Icon
{
background: url(http://laithz.jeeran.com/blogimages/bul2.gif);
}

.Icon, div:hover.Icon
{
height: 102px;
width: 71px;
background: no-repeat;
cursor: pointer;
}

HTML:

<divclass="Icon"></div>

For IE, we have to use JavaScript in addition to CSS:

CSS:

.Icon
{
background: url(http://laithz.jeeran.com/blogimages/bul3.gif);
}

.IconOn
{
background: url(http://laithz.jeeran.com/blogimages/bul2.gif);
}

.IconOn, .Icon
{
height: 102px;
width: 71px;
background: no-repeat;
cursor: pointer;
}