Question

I have script that handles image rollovers with css. What I would like to know if this the proper way of doing a CSS rollover? I also wanted to know if this is good how do you handle other rollover images do you have to have a separate css for each image?

Here is an example: http://jsfiddle.net/GFec3/40/

CSS Code:

a.rollover {
   display: block;
   width: 27px;
   height: 25px;
   text-decoration: none;
   background: url("http://www.gdisinc.com/barker/images/menubar/bnt_facebook.jpg");
}

a.rollover:hover {
   background-position: -350px 0;
}

.displace {
   position: absolute;
   left: -5000px;
}

HTML

 <a href="#" class="rollover" title="Webvamp" width="54" height="25"><span class="displace">TEST</span></a>

This works but just wanted to know is there a special way to handle more then one rollover image?

Answer 1

You don’t have to use background images in css. Example:

<STYLE type="text/css">
.roll .on { display: none; }
.roll .off { display: block; }
.roll:hover .on { display: block; }
.roll:hover .off { display: none; }
</STYLE>
<DIV class="roll">
  <IMG class="on" src="...">
  <IMG class="off" src="...">
</DIV>

There’s lots of ways of doing this. Which to choose is up to you.