Question

I remember reading somewhere (a long time ago) that sprites – or at least I think that’s what they were called – were better than using two images when you were trying to change an image on hover. I believe the reasoning was something to do with not having a delay. For example sometimes I’ll go to a website and go to click on a link and for a split second there’s no image there… it’s blank… before the second one shows up. Isn’t that because the second image has to load first? If that’s the case wouldn’t “sprites” be better?

Now which ever way is the better approach I’d like to take. Basically, I have a form button I want to change with an image… and when hovered over I want it to change.

I googled and found out doing something like <input type="image" ...> would work, but than other people were saying that’s not the right way yady yady ya.

So how should I do it? Sprites or separate images? And most importantly, how can I do it?

Many thanks,
The Novice.

Answer 1

CSS Sprites are the way to go, else you’d have to “preload” your hover image.

Let’s assume your button is 100px wide and 20px high.

Create a new 100px by 40px image, placing your “default” state image on the top, and your “hover” state image on the bottom.

Then in your HTML, create your button.

<input type="button" class="submit" />

Apply your new image as a background on the button element.

.submit {
    display: inline-block;
    width: 100px;
    height: 20px;
    border: 0;
    background: url(button_bg.gif) no-repeat top;
}

Then simply change the position of the background image on the hover state.

.submit {
    background-position: bottom;
}

Your hover image would have already been loaded, so there won’t be any delay.

Have fun!