Single-image Rollover

Ever wanted to use a single image for a rollover (a.k.a. hover) effect?
Well here it is! (Apparently using CSS to achive a hover effect is far superior to using javascript, since JS can sometimes be turned off, thus rendering your rollover useless.)

Example

Original Image


CSS Code
1. a.rollover {
2. display: block;
3. width: 30px;
4. height: 30px;
5. text-decoration: none;
6. background: url("email.jpg");
7. }
8.
9. a.rollover:hover {
10. background-position: -30px 0;

HTML Code

1. <a href="#" class="rollover">&nbsp;</a>

Then adjust your images (60px high x 100px wide) and links as needed. It's so easy! Qs? Contact me.