I've got a series of images of faces that need rollovers, BUT, they also need to change according to mood...is there an easy way to do this??

Let's say I have three faces, glasses, redHat and bald. I need those images to have rollovers with their names at the bottom BUT, I need the images (initial and rollover) to change based on a mood (happy, sad, etc.)

So, I'll have glasses.jpg, which will contain the images for glassesHappy, glassesROHappy, glassesSad, glassesROSad, etc.

Is there a way I can set up the CSS to display the mood-specific images and just have to update the style to change the "mood?"

Hope my question is clear enough...

Here's what I've got so far for my rollover:

CSS:

Code:
a.srollover {
          display: block;
          width: 40px;
          height: 40px;
          background: url("glasses.jpg") 0 0 no-repeat;
          text-decoration: none;
      }

a:hover.srollover {
          background-position: -40px 0;
      }
HTML:

Code:
<a class="srollover" href="#">&nbsp;</a>
Not sure this is the best way to handle the rollovers for this purpose or how to get the "mood" in there. Just trying to make this as easy to update as possible, so, as the mood changes for a face, I just have to change one variable for each image.

Make sense??

TIA!!