: How do I make a sprite full of different images (hover, non-hover, etc)? I understand there are tools on the net to make a sprite, but I'd like to learn how to create icons for the different

@Steve110

Hover images aren't the only use for a CSS sprite, you can also use a sprite for static images or different icon states. You would create a single image pretty much like you have given as an example and use different CSS background coordinates for each icon state. The trick is just getting the background coordinates right.

Vote Up Vote Down

@Nimeshi995

If I understand your question, and you already know that a sprite is really just an image-combining-image, then the last part you need to know is about the CSS.

The CSS is what associates a portion of your image with a state. You create the html representing the button, assign it a class, then you write up your CSS.

.my-button{
width:20px;
height:20px;
background:url('my-button-sprite.gif') top left no-repeat;
}
.my-button:hover{background-position: 20px 0px;}


Just add an appropriate horizontal offset (the first number) to bump the sprite where it should appear for the desired state.

Vote Up Vote Down