CODEWITHSUNDEEP
css
Frank G.
Frank G.

Reputation: 1579

CSS Image Rollover

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?

Upvotes: 2

Views: 11777

Answers (3)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324830

The method you currently have is the most efficient. Among other things, it "preloads" the rollover image since it's the same one as the non-rollover just a different part of it. It also reduces the number of HTTP requests to the bare minimum (short of the data scheme) and in some cases actually improves filesize (best case is two images using similar colour palettes, one colour table needed instead of two).

Don't change it, it's perfect.

You do have to define a separate CSS for each rollover, however if the images are the same size you can reduce the damage by reusing the :hover definitions.

Upvotes: 1

Dipak
Dipak

Reputation: 12190

Use CSS sprite, with this you will use only one background image, you just have to change background position for different image hover

CSS Sprites: Image Slicing’s Kiss of Death

Upvotes: 2

Ariel
Ariel

Reputation: 26783

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.

Upvotes: 4

Related Questions