A List Apart has a good article on them: CSS Sprites: Image Slicing’s Kiss of Death
Chad Birch
2010-05-28 21:13:34
A:
I have gone through the article but it was not very clear to me. Can you please explain the use case of CSS Sprites using an example ?
Rachel
2010-05-28 21:14:49
+1
A:
All it means when you do spriting is that your small images are tiled on a single image file. You can create this single image file yourself if you have a decent image editing program. Then you can use the css background-position property to specify the piece of the image to use for that sprite.
Tesserex
2010-05-28 21:16:10
I do not have any image editing program, also how can I club different images together, let's say if I have 3 images and in between I have some contain, for ex. Image 1 -- Some Contain -- Image 2 -- Some Content --- Image 3, now I want to combine all this images and so how this can be done, is this clear ?
Rachel
2010-05-28 21:23:00
A:
Look here at Google's sprite that they use for iGoogle. You are just combining the images into one large image. That way you make one request. You then use background positioning and height and width to select which part of the image you want.
This also works really well for images that change on hover, as the hover state is already downloaded and does not have any delay.
Dustin Laine
2010-05-28 21:16:51
A:
Let's say you have button which changes its background image when it's moused-over. Mouseovers need to happen instantly to give good feedback to the user. If you just simply switched the image on the button, a browser might have to go to the server to fetch the image, which would spoil the effect. By using a CSS sprite, you have each image loaded and ready to go on the button instantly.
Also, some browsers "flicker" when you switch images. CSS sprites avoid this flicker issue which can sometimes happen.
Dave Markle
2010-05-28 21:17:32
@Sarfraz: I have gone through this article but it's not very clear, please read through my question properly. Can you provide me an example and create an sprite using CSS as it would be help ful.
Rachel
2010-05-28 21:24:57
@Rachel: Example is provided in the link i posted, you have to understand that my friend.
Sarfraz
2010-05-28 21:29:16
+2
A:
The example you need to study is the following:
#nav li a {background-image:url('sprite.gif')}
#nav li a.item1 {background-position:0px 0px}
#nav li a:hover.item1 {background-position:0px -72px}
#nav li a.item2 {background-position:0px -143px;}
#nav li a:hover.item2 {background-position:0px -215px;}
Sprite.gif is a big image containing all the smaller images in a grid (doesn't have to be). You then use positioning to display just that part of the sprite that contains your image.
There are online tools that given a set of images returns a big sprite image with the coordinates of where to find the smaller images.
Yehonatan
2010-05-30 14:33:39