CSS for images/rollovers based on tag/variable

Display CSS rollovers based on tag/variable?

[flashpipe]

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:

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:

<a class="srollover" href="#">&nbsp;</a>

Not sure this is the best way to handle the rollovers for this purpose. Just trying to make this as easy to update as possible.

TIA!

[sharpmac]

Javascript, that would be the best way.

CSS doesn't really handle user action that well, especially when you have another variable involved. You will need to do some google work on "javascript image rollover" and I am sure you can find exactly what your looking for.

quick a quick flyby in google i found the below
<snip>

As for updating as long as you link your javascript file to an external source you should be able to pull that file back up with ease and make any changes needed.

[edited by: swa66 at 1:22 am (utc) on May 13, 2009]
[edit reason] No link dropping please see ToS and forum charter [/edit]