What you want to do is a technique called CSS sprites. Take the image you posted in your question and use the CSS
background-image
and
background-position
attributes to change which part of the image is displayed in an element.
For example, say I have a menu item with the id "menuItem1" that I want to have a mouse-over effect for. This menu item is 100px wide. I can create one image with both the normal and hover images side-by-side and use the following CSS to accomplish the effect:
#menuItem1
{
background-image: url(http://www.myserver.com/images/menuSprite.gif);
background-position: 0px 0px;
}
#menuItem1:hover
{
background-image: url(http://www.myserver.com/images/menuSprite.gif);
background-position: -100px 0px;
}
Here is a good article about CSS sprites from Smashing Magazine that links to a bunch of tools and tutorials:
http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/[
^]