Question

I am a great lover of sprites, but. Got thinking, I do everything long hand, so was wondering if there was a shortcut.

Essentially, creating a sprite is easy. Making the sprite work is easy, but doing lots of sprites, gets laborious.

So was wondering what is the cleanest way of doing multiple sprites, that I can position anywhere on our web pages. I have seen multiple sprite sheets, similar to jquery ui icons, but we have our own icons. So was wondering if there was a cleaner method.

All up we will have approx 16 to 20 sprites in the set. Below is sample of html and css.

#logo-link
{
    width:32px;
    height:32px;
    text-decoration:none;
    display:block;
    background-image:url(sprites/analytics.png);
    background-position:0 32px;
}
#logo-link:hover,#logo-link:active  { background-position:0 0; }

#logo-link2
{
    width:32px;
    height:32px;
    text-decoration:none;
    display:block;
    background-image:url(sprites/addlisting.png);
    background-position:0 32px;
}
#logo-link2:hover,#logo-link2:active    { background-position:0 0; }

html

<a href="link1.html" id="logo-link"> </a>

<a href="link2.html" id="logo-link2"> </a>

Any thoughts, on refining our sprites. Or should we create a sprite sheet with all sprites on ?

Image sample:

Added basic sprite sheet on x axis

Example:

Ok Guys:

So far I have this in css:

.sprite
{
    width:32px;
    height:32px;
    text-decoration:none;
    display:block;
    background-image:url(sprites/spritesheet.png);
}

.addlisting{background-position:0 32;}
.addlisting:hover{background-position:0 0;}
.addanalytics{background-position:64 32;}
.addanalytics:hover{background-position:64 0;}
.addprofile{background-position:32 32;}
.addprofile:hover{background-position:32 0;}

html I have:

<a href="link2.html" class="sprite addlisting"> </a>

<a href="link2.html" class="sprite addanalytics"> </a>

<a href="link2.html" class="sprite addprofile"> </a>

What I really dont get ( see the spritesheet.png I made above , is why profile is at co-ordinates 32,32 and why analytics is at co-ordinates 64,32

Perhaps I have my co-ords wrong lol

This is driving me mad now, argghhh

Added the actual sprite sheet now, but I am buggered if I can get so-ordinates to play with me lol
Image added:

![alt text][5]

Finally figured it out.

Answer 1

You could combine the selectors like so.

#logo-link,#logo-link2
{
    width:32px;
    height:32px;
    text-decoration:none;
    display:block;
    background-position:0 32px;
}
#logo-link:hover,#logo-link:active,#logo-link2:hover,#logo-link2:active {background-position:0 0;}

#logo-link{background-image:url(sprites/analytics.png);}
#logo-link2{background-image:url(sprites/addlisting.png);}

Alternatively you could add a class called sprite

.sprite
{
    width:32px;
    height:32px;
    text-decoration:none;
    display:block;
    background-position:0 32px;
}
.sprite:hover,.sprite:active {background-position:0 0;}

#logo-link{background-image:url(sprites/analytics.png);}
#logo-link2{background-image:url(sprites/addlisting.png);}

And the html

<a href="link1.html" id="logo-link" class="sprite"> </a>

<a href="link2.html" id="logo-link2" class="sprite"> </a>

Edit: Here is another alternative if you plan on using a sprite sheet.

.sprite
{
    width:32px;
    height:32px;
    text-decoration:none;
    display:block;
    background-image:url(spritesheet.png);
}
.analytics{background-position:0 0;}
.analytics:hover{background-position:0 0;}
.addlisting{background-position:0 0;}
.addlisting:hover{background-position:0 0;}

HTML:

<a href="link2.html" class="sprite addlisting"> </a>

And a jsfiddle
http://jsfiddle.net/gJkCZ/