CSS sprites saves many HTTP requests and is a cool way of using images on a webpage. www.kunals.com homepage is created using CSS Sprite along with PHP to give a painting like dynamic effect.
The personal home page describes various web attributes in a cloud format, and listing attributes from A-Z. Every time this page is refreshed/loaded, size and color of the attributes changes. On hovering over the attribute (text), it gets turned into grey color and on the left panel description is shown. Along, with the change of color to grey, a corresponding image block gets colored from grey color in the top left area.
Also, hovering over this image makes the hovered over block colored and gives a painting like effect.
With PHP various parts of the image has been divided into <DIV> dynamically for CSS Sprite calling and there is no need to manually define pixels for each CSS sprite call. With this kind of implementation an image can ne changed easily without changing the CSS Sprite coding and styles in CSS as these will be changed dynamically.
Currently, on hovering that particular block gets painted with a normal cursor. But in this on hover cursor image can be changed to paint icon to give a better look of painting.
Read on How to implement Dynamic CSS Sprite Painting effect using CSS and PHP
CSS Sprites is pretty much the exact same theory: get the image once, shift it around and only display parts of it, saves the overhead of having to fetch multiple images.