Toolbar button images

[Frank]

I have a toolbar button that is associated with an extension. I
currently use a CSS file to make the button image change based on the
state of the extension.

I currently have two different button images (4 if you consider both
large and small images). If I needed to use more than two images to
reflect more than two states, could that be done?

Do the rules in the CSS file have to be in any particular order (if two
rules match, which is chosen)?

Thanks,

Frank

[bann...@gmail.com]

I have two states switching images in the tool bar and would have no
problem emplementing a third, so yes it's possible.
//setting the state
document.getElementById("toolbar-button").setAttribute("toolbar-button",
"on");
//or
document.getElementById("toolbar-button").setAttribute("toolbar-button",
"off");

//CSS
#myExten-toolbar-button[myExten-toolbar-button="on"] {
list-style-image: url("chrome://myExten/skin/toolbar-button.png");
-moz-image-region: rect(0px 24px 24px 0px);
}
#myExten-toolbar-button[myExten-toolbar-button="off"] {
list-style-image: url("chrome://myExten/skin/toolbar-button-off.png");
-moz-image-region: rect(0px 24px 24px 0px);
}

To emplement a third I would simply change add an attribute and the
corresponding CSS

[Nickolay Ponomarev]

> Do the rules in the CSS file have to be in any particular order (if two
> rules match, which is chosen)?
>

See http://www.w3.org/TR/REC-CSS2/cascade.html#cascade

Nickolay