Hi, ok if you don’t know what a sprite is then this post might get confusing quite quickly. I’d suggest having a quick read up and find out what they are. Simply put, the technique of using a CSS Sprite is so that you can reduce the number of HTTP requests browsers make to your server by only showing a portion of a larger image by changing the background-position (so that only the bit you want to see is showing through the object). Another use for them (and this is the one we’ll be using here) is for convenience.
A pie chart of increasing values 0-100% could be stored as 20 separate independent images, named pie-[00-100].gif. This however is inefficient for both the browser, the server, and the user. The user will have to wait for the image to download if they haven’t already seen it (and hence cached it). In my example I have 20 pie charts of increasing values in one image. The background-position css property will dynamically change via server-side code to show only one of the 20 available pie charts.
Here’s the finished article:
Here’s how it was done…
Comments