Question

How to dynamically change the image of a toolbarbutton with javascript?

I try this :

<toolbarbutton id=""  oncommand="this.style.listStyleImage= 'url(green-chrono.png)';alert('boom');" label="Menu-button" type="menu-button" style="list-style-image: url(chrono.png);">
        <menupopup id="edit-popup1">
            <menuitem id="toto" label="Accéder à la pointeuse"/>
            <menuitem id="recap" label="Accéder au récapitulatif des heures"/>
        </menupopup>
    </toolbarbutton>

But it doesn’t work, when I click on the button, the picture disappears.

images and xul file are in the same directory.

Thanks for your help

Answer 1

In general the approach is correct but you are using a relative URL. Relative URLs are resolved relative to the stylesheet – so if chrome://myextension/skin/style.css uses the relative URL green-chrono.png the browser will load chrome://myextension/skin/green-chrono.png. In the case that you have here there is no external stylesheet however meaning that the URL will be resolved relative to the XUL document. I guess that this XUL code is located in the browser window – meaning that the URL chrome://browser/content/green-chrono.png is loaded and it doesn’t exist of course. The solution: specify the absolute URL instead of a relative one, e.g.:

this.style.listStyleImage = 'url(chrome://myextension/skin/green-chrono.png)';