How are sprite images used

[ajfmrf]

I see these images called sprite images.

They seem to have multiple parts that are used in a way I don't understand.

How do you specify what part you need for these images?

Like this is used on this page as I write this http://www.dynamicdrive.com/forums/clientscript/ckeditor/skins/kama/images/sprites.png

[bernie1227]

http://css-tricks.com/css-sprites/

[jscheuer1]

That's an excellent resource. I would add a relatively simple explanation though:

A sprite is a composite image most often used in a rollover. Unlike a more traditional rollover that changes the image onmouseover and onmouseout, usually by changing the src attribute of an img tag, a sprite is usually a background image of an element whose dimensions are smaller than the sprite image. Because of this difference in size, only a portion of the sprite image can be visible at any given point. To change its appearance, the background image's position (top and left coordinates) are changed, thus revealing a different part of the sprite image.

There are others, but a primary advantage is that, since the sprite image is already loaded, there is never any lag time in simply shifting its position property.

Another usage for a sprite is that it can contain all of the various utility images for a script like - say a lightbox. It can contain fancy boarders, close, next and previous buttons. It can then be employed as a background image for each of these features simply by having its position property adjusted so that only the desired portion is visible.

Here the primary advantage is only one request for one image that's less bytes in aggregate than all of the separate images would be. That saves both time and bandwidth.

[ajfmrf]

It must take some work to get the postions for each part of the sprite.

And then each time that sprite is used it must be used with the same position of the sprite? Or,as long as the original dementions of the sprite are not changed,then it would be the same each time it is used.

[jscheuer1]

Doing it all "by hand", yes it's a lot of work unless it's just two or three images you're combining. But that's where the resource Bernie linked to comes in. They have a link to Sprite Me:

http://spriteme.org/

where you can rather easily compile your own sprites and have the background positions figured out for you.

[Beverleyh]

TIP:

If you're making sprites manually in Photoshop (or if you lose the CSS generated by Sprite Me), an easy way to find the position of each image contained in the big sprite image is to turn on the information palette (Window >> information) and then use the x/y coordinates.

Hover at the top left point of each sprited image and make a note of its x/y coordinates, then transfer those x/y values to the background position in your CSS, but with a minus sign in front.

Don't forget the minus sign! I endured much frustration when I first got into using sprites simply because my brain refused to acknowledge that I needed to use negative values in the css background position to pull the big sprite image upwards and to the left.