How to show a specific frame of a multi-frame GIF-formatted image in HTML?

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/[^]