Webmaster Forum / HTML, CSS, Scripts / CSS / January 2008

I would like to be able to change the background-image of a <div>
based on the :active pseudo-class, but I want to do it on a per <div>
basis. It is possible to set up a class to do it for all <div>s of a
class with:

div.imagediv{
  background-image: url(image.png);
  background-repeat: repeat-x;
}

div.imagediv:active {
  background-image: url(activeimage.png);
}

But this only allows for all images of a class to have the same
background image. The <div>s will be of different sizes, so each of
them will need a difference background image, but I also want time to
have a different active image. I found a syntax reference on the
w3.org website (http://www.w3.org/TR/2000/WD-css-style-attr-20001025)
under "3. Cascading Order" where it has inline pseudo-classes, but I
can't seem to get it to work (I don't know if browsers implement it).
What I would like is something along the lines of:

<div style="{background-image: url(image.png); background-repeat:
repeat-x;}
                :active {background-image:
url(activeimage.png); }>...</div>

This is patterned after the link above, but does not change the
background-image when the <div> is clicked. Is this possible? Does
anyone know how to do it? Is there a different way I might be able to
get it to work without having a different class for each <div> height?

Thanks,

Don