Change background image on client

[Casper]

Hello

I'm trying to change the background image of an RadButton with javascript:

<telerik:RadButton runat="server" Width="85px" Height="33px" ID="btnSup"">
                <Image IsBackgroundImage="True" ImageUrl="/Images/Buttons/test.png"></Image>
</telerik:RadButton>

But I can't figure out how to do this? I have looked in the documentation here http://www.telerik.com/help/aspnet-ajax/button-client-side-basics.html but did not find anything.

Any suggestions?

-Casper

[Princy]

Hi Casper,

Try the following code snippet to achieve your scenario.

JS:

<script type="text/javascript">
    function OnClientLoad(sender, args) {
        var imageData = sender.get_imageData();
        sender._setBackgroundImage(sender.get_element(), "image.jpg");
    }
</script>

Hope this helps.

Regards,
Princy.

[Casper]

Hi Princy

Sorry about the slow response.

Your solution almost works.
When I click the button, my click event change the buttons background (like in your example) and it works, but when I move the cursor away/over the button it change back to the old image.

[Slav]

Hi Casper,

Adding the code, marked in the following sample, should help you persist the changed RadButton background image:

<script type="text/javascript">
    function OnClientLoad(sender, args) {
        var imageData = sender.get_imageData();
        sender._setBackgroundImage(sender.get_element(), "image.jpg");

        var imageData = { hoveredImageUrl: "image.jpg", imageUrl: "image.jpg" };
        sender.set_imageData(imageData);
    }
</script>

Greetings,
Slav
the Telerik team

[Casper]

Thank you very much, that worked.