These are the images I made in Photoshop used to create the sprites. I took 2 and 3 images and stacked them one on another
dillo sprite
Initial Sprite
Mouseover Example
Light Bulb Sprite
Code Sprite
Email Button Sprite
These images can be used to change images on mouseOver. It helps if you have access to Photoshop. The CSS used for the sprites is setting the width of the image to the full width of the image and set the height of the image to half the height of the image and set the display to block. This way only the top or the bottom image will be displayed at any given time. For example, the image “Code Sprite” is 75 pixels in width and 174 pixels in height. In the CSS style code the width is set at 75 pixels but the height is set at 87 pixels, roughly half the height of the image.
The main advantage for using CSS sprites is the speed of downloading one image instead of downloading two. In these examples there may not be a noticeable difference in time when using a high speed connection to the internet as with a DSL connection. But with larger images and a slower connection to the internet as with a dial up connection, the user may need to wait more time for the page to load; making for a less enjoyable experience for the user.
Click here to learn more about CSS sprites
If you don't have Photoshop, create your own using CSS Sprites Generator and only use small image files otherwise you defeat the purpose of maintaining the quickest page load time possible.