Active and Inactive List Item Icon

Apart from Active and Inactive back ground for the list item, we have the need for active and invactive icon for the list item.

Current we use picture to specify this icon. Would it be possible to specify the active and inactive icons to this item using style sheet. If yes, any example pl.l

Regards,
Nagendra

listitem {

bg-image: url(<normal picture>);

}

listitem:disabled {

bg-image: url(<disabled picture>);

}

Hi,

Our list defination is similar

listitem {
    bg-image: url( /fbar.png );
    color: white;
    font-size: large;
}

listitem:hover {
    bg-image: url( /fbar_active.png );
    bg-color: blue;
}

however, the defination of  list is

<list style="layout-data:bld(center)">
     <listitem onAction="livecamera" style="gap:5 0">
  <picture src="/livecamera_inactive.png"/>
  LiveCamera
     </listitem>
     .
     .

We are looking for is changing the icon of List items picture in this case  is to use livecamera_inactive.png when the item is not selected and use livecamer_active.png when item is selected.

Was looking for Pseudo Classes support for hover etc.. for picture

The listitem bg-image and the inner picture are different things. I could advice you to switch your picture into a simple container and use the enable attribute of the listitem. Int this case your xml is :

<list>

<listitem onAction="..">

<container class="livecamera" />

LiveCamera

</listitem>

...

</list>

And CSS :

...

listitem .livecamera {

min-size: <img widgth> <img height>;

bg-image: url(/livecamera_active.png);

}

listitem:disabled .livecamera {

bg-image: url(/livecamera_inactive.png);

}

Hi Tofu,

We tried as you suggested.. but it is not working.. Is this is a issue in the current impl. or are there any other solutions arround css and xml way.

Regards,
Nagendra

Strange ... could you post a piece of code ?