Rollover.css

Hi… I’m new here and my name is Marja. I live in the Netherlands so please forgive me any language slip of my keyboard.
I’m also new to css but I love to learn it because it finally didn’t 'cause any popup warnings in my windows. I have tried to use the rollover.css tutorial but it only works for 1 image… and it work fine!!! But… I’ve about 6 images to do, so how do I have to change the css file and the html file?

This is the original css which work fine:
/* CSS Rollovers */
#example{
height: 100px;
width: 101px;
text-indent: 10000px;
overflow: hidden;
background: url(eng.jpg) top left no-repeat;
display: block;
}
#example:hover{
background-position: bottom left;
}

It’s related to this part of the html:
<div>
<a href="/epoems.html" id=“example”></a>
</div>

Can any of you css-Masters tell me how to put more than 1 image to this code?

Peace,
Marja