CSS button rollovers - Image sprites

Jacob — Mon, 04 May 2009 20:00:54 +0000

I first learned this here, I hope it will be helpful for some.

Merge the two images as one.

you will notice the image is 60 pixels in height I have placed the guide at 30 pixels and place the rollover text on the guide.

The markup is simple:

Rollover

Break down of the code:

» CSS identifier
href="link/" » file location
title="Rollover Link" » title tag this good for SEO
>Rollover » Link text
 » Closing tag

The CSS is simple as well:

a.rollover {
background:url(rollover.gif) no-repeat;
background-position:left top;
display:block;
height:30px;
width:160px;
text-indent:-999px;
overflow:hidden;
}
a:hover.rollover {
background-position:left bottom;
}

Break down of the code:

a.rollover {
background:url(rollover.gif) no-repeat;   /* places the image in the background of the link */
background-position:left top;   /* background position */
display:block;  /* this changes the default render style from inline to block creating a "box" */
height:30px;  /* sets the height of box */
width:160px;  /* set the width of box */
text-indent:-999px;  /* pushes the text out of the box */
overflow:hidden;  /* this hides the text and lower part of the image that is outside the defined box */
}
a:hover.rollover {
background-position:left bottom;  /* slides the image up creating the rollover effect. */
}

```
In action: Rollover
```

Jacob Schulke» sprites

CSS button rollovers - Image sprites