Prev: simpler way to do do h1,h2,h3,h4,h5,h6
Next: msie bug
From: mail4dag on 1 Feb 2008 14:12
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
From: Ben C on 1 Feb 2008 17:26
On 2008-01-31, mail4dag(a)yahoo.com <mail4dag(a)yahoo.com> wrote:
> 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).

I don't think they do. That's quite an old CSS2 draft you've found. I've
never heard of this syntax before (I only got involved with this whole
business from CSS 2.1).

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

I think you will have to just have a different class.
 | 
Pages: 1
Prev: simpler way to do do h1,h2,h3,h4,h5,h6
Next: msie bug