Simple mouseover effects in CSS/HTML, no JavaScript at all. If you lose the CSS this page degrades gracefully to a simple unordered list.

This example is using techniques from CSS Sprites: image slicing's Kiss of Death by Dave Shea.

CSS follows for convenient copypasta - if you're not sure you've understood it, check out the sprite image here and try to modify this code so you animate some of the other images on the sprite. On this sprite image, the sprites are 32x32px making the maths fairly easy.

In a nutshell...

#hover_img li {
    list-style: none;
    display: inline;
    margin: 0;
    padding: 0 ;
}

#hover_img a {
    width: 32px;
    height: 32px;
    display: block;
}

#item1 a {
    background: url(sprite-example.gif)
    0px  0px no-repeat;
}

#item2 a {
    background: url(sprite-example.gif)
    -32px 0px no-repeat;
}

#item3 a {
    background: url(sprite-example.gif)
    -64px  0px no-repeat;
}

#item1 a:hover {
    background: transparent url(sprite-example.gif)
    0 -32px no-repeat;
}

#item2 a:hover {
    background: transparent url(sprite-example.gif)
    -32px -32px no-repeat;
}

#item3 a:hover {
    background: transparent url(sprite-example.gif)
    -64px -32px no-repeat;
}