indicator(key
, value
, ..., key
, value
)
Inserts in generated content an image (taken from specified set of images) which is determined using the value of specified attribute or XPath expression.
Similar to label except that indicator
is rendered using a set of images rather than text.
Key | Value | Default | Description |
---|---|---|---|
attribute | Qualified name of an attribute of the element which is the target of the rule | No default One of attribute or xpath must be specified. | The value of this attribute is compared to the values of the state arguments. If one of the state argument is found equal to this value, the corresponding icon is displayed. Otherwise first icon is displayed. |
xpath | Literal string specifying an XPath expression using the target of the rule as its context node | No default One of attribute or xpath must be specified. | The value of this XPath expression is compared to the values of the state arguments. If one of the state argument is found equal to this value, the corresponding icon is displayed. Otherwise first icon is displayed. |
state | Identifier or string | No default | Specifies one of the states of the indicator. Must be followed by corresponding icon argument. An indicator always contains several state/icon pairs. |
icon | url(), disc, circle, square, icon() | No default | Specifies one of the images used to render the indicator. Corresponding state must precede this argument. An indicator always contains several state/icon pairs. |
Key
, value
, ..., key
, value
may also specify style parameters.
XHTML examples:
p.msg:before { content: indicator(attribute, title, state, info, icon, url(info.gif), state, warning, icon, url(warning.gif), state, error, icon, url(error.gif)); display: marker; } div.hotel span.with_stars:after { content: " " indicator(xpath, "substring-after(ancestor::div[@class='hotel']/@title,\ 'stars')", state, "not_rated", icon, icon(diamond), color, gray, state, "0", icon, url(0star.gif), state, "1", icon, url(1star.gif), state, "2", icon, url(2star.gif), state, "3", icon, url(3star.gif), state, "4", icon, url(4star.gif), state, "5", icon, url(5star.gif)); display: inline; }