Web Research - Page 306

I found this tutorial very helpful in creating CSS sprites. 
The main website is From The Couch and this is the actual tutorial.

     This tutorial shows a very detailed, step-by-step explanation of how to create and use your own CSS sprites on your own webpage. It allows you to create image links that show a different image when someone hovers over them or clicks on them. You must first take the images that you created or plan to use for your site and group them onto one canvas, and then export them as a .gif with a transparent background. Then place the "a href " links to the images in your html pages. After that you must write the CSS to configure the height, width, (display: block), and use the background image with no repeat and hidden overflow. After that you must set the 'normal position' of the buttons in the X and Y axis (example: -10px by -10px). Then you should do the same for the 'hover position'. Note that these values determine which part of the single image is actually displayed. After that you are finished! For an example of the finished image links, look at the menu on the left of the tutorial page.