CSS Rollovers...with a twist!

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!!

Sure can. Just use another class.

Code:

---

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

a.happy {
          background-image: url("glassesHappy.jpg");
      }

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

---

Code:

---

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

---

Is that what you mean?

Yes! Is there a way to use the image name (glasses.jpg), or pass some variable so I don't have to create a css class for each image?

So, it might be something like:

Code:

---

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

a.happy {
          background-image: url(imageName+"Happy.jpg");
      }

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

---

and

Code:

---

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

---

Thanks!

Thanks!!

Not with CSS. You need a class for each one, unfortunately.

Hmmm...that's a bummer...I've got 16 images I need to do this with...maybe I can find a better solution...

Hmmm...also, looking at this, I would need a separate class for each "mood" rollover (since they'll all be different rollovers depending on the mood)...

There's got to be a better way to accomplish something like this...would be so easy in flash, but the client wants html...

Is there a way to do something like this with javascript?? Researching that now, and it seems like a better option for this...

Any tips/tutorials/examples??

Thanks!!

Closer?? Not sure...

take a look:

http://www.brianwpiper.com/css/test4.html

Not sure I'm following the classes...not sure if there can be multiple rollover classes for the same image??

First foray into CSS for anything other than basic layout/style...

Thanks!!

Here's a new thought...is there a way to have a static image of the face, and then have one transparent image with the happy, sad, rollovers on it and then display that OVER the face image?? That would be ideal!!

To answer your last question: yes. That's possible, but you'd need a transparent PNG. So you'll either have to ignore IE6 completely, or apply a simple PNG fix so it shows up properly.

COOL!!! I GOT IT!!! Sort of... :)

http://brianwpiper.com/css/tst1.html

Using png, so I'll have to research the IE6 workaround...

Is the best workaround for this still Angus Turnbull’s .htc script?? Or is there a better method??

I'm not a fan of the .htc fixes because they break W3C compliance. Here is a new one that I've had my eyes on and does much more than any of the old fixes used to do: http://www.dillerdesign.com/experiment/DD_belatedPNG/

I haven't actually tried it in practice yet, but it looks very promising.