Change background image on client

5 posts, 1 answers
  1. Casper
    Casper avatar
    5 posts
    Member since:
    Feb 2012

    Posted 11 Dec 2012 Link to this post

    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
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 11 Dec 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Casper
    Casper avatar
    5 posts
    Member since:
    Feb 2012

    Posted 19 Dec 2012 Link to this post

    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.

  5. Answer
    Slav
    Admin
    Slav avatar
    1355 posts

    Posted 21 Dec 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. Casper
    Casper avatar
    5 posts
    Member since:
    Feb 2012

    Posted 26 Dec 2012 Link to this post

    Thank you very much, that worked.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017