Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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 states of the icon. Is there an easy way to make all these different variations of this icon:

alt text

(Also, can you tell me how I can better word my question so it doesn't sound like I'm asking for sprite advice?)

share|improve this question
add comment

2 Answers

up vote 3 down vote accepted

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.

share|improve this answer
    
Virtuosi Media is right, sprites can be used for more than just button states. One one of my sites I have a sprite that combines all of my buttons, bullets, icons AND horizontal repeat images. My CSS is pretty clean, assigning the background to 30+ elements at once, then only adjusting the offsets for each. This dramatically cut down the number of requests and page load time. –  Off Rhoden Sep 3 '10 at 21:35
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.