Change button background image on mouse over ad on click

5 posts, 0 answers
  1. Daniele
    Daniele avatar
    3 posts
    Member since:
    Feb 2011

    Posted 26 May 2011 Link to this post

    Hi guys,
    I have a particular need on a project I'm working on: I need to change the background image of the RadToolbar's buttons when the user moves the mouse over them or click on them.
    The problem is that I have different background images.

    So, if you click/mouse over on the first button I need to change it's background to image1.png, on the second button to image2.png, and so on.

    ButtonA => Image1.png
    ButtonB => Image2.png
    ButtonC => Image3.png
    ButtonD => Image1.png
    ButtonE => Image1.png
    ButtonF => Image4.png

    I can't figure out how to do such a thing.

    Any help is appreciated.

    Thanks,
    Daniele Salatti
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 26 May 2011 Link to this post

    Hello Daniele,

    You can achieve this by using the hover selector.

    Check out the following demo.
    ToolBar / Unique Item Appearance

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Daniele
    Daniele avatar
    3 posts
    Member since:
    Feb 2011

    Posted 27 May 2011 Link to this post

    Hi Princy,
    thank you for your answer.

    I have tried following the example in the demo you linked and it almost worked.
    I have to fix a couple of things and I need a little help.

    The most annoying one is that even if the button has the correct CSS class in the CheckedCssClass attribute, if I move the mouse over and then out of it, it loses the CSS class it was associated to (thus losing the background image).
    The following is one of the code for one of the buttons:

    <telerik:RadToolBarButton Owner="rtbTopMenu" CheckOnClick="true" AllowSelfUncheck="true" Group="menutop" Text="Posta Certificata" Value="2"  HoveredCssClass="tabRed" FocusedCssClass="tabRed" CheckedCssClass="tabRed"></telerik:RadToolBarButton>

    And here is the CSS code:

    .tabRed
    {
        color: #fff;
        background: #fff url('../../images/tlc_bgactive_red.png') repeat-x;
    }

    Is there something wrong?


    The second problem is that the background actually doesn't cover the whole button, leaving some pixels of space at the top and at the bottom (see attached file). I have tried playing with the CSS code but every time I manage to fix it, eventually things got screwed up somewhere else (I have a love-hate relationship with CSS). Any suggestions?

    Thanks in advance,
    Daniele Salatti
  5. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 31 May 2011 Link to this post

    Hi Daniele,



    Please try using the following css class selectors and apply them as shown in the markup below. Here you can read for the different css class selectors that are applied to the RadToolBar control. Considering the second issue that you encouner this is because the Default skin is applied to the RadToolBar control. For further information please take a look at the following help article



    <telerik:RadToolBarButton runat="server" Text="Button 0" CssClass="red" HoveredCssClass="redHover"
                        FocusedCssClass="redFocus">
                    </telerik:RadToolBarButton>
                    <telerik:RadToolBarButton runat="server" Text="Button 1" CssClass="green" HoveredCssClass="redHover1"
                        FocusedCssClass="redFocus1">
     

    .green
    {
        background-color: Green !important;
    }
    .red
    {
        background-color: Red;
    }
    .redHover a.rtbWrap,
    .redHover .rtbOut,
    .redHover .rtbMid,
    .redHover .rtbIn
    {
        font-style: italic !important;
        background-image: none !important;
        background-color: green !important;
    }
     
    .redFocus a.rtbWrap,
    .redFocus .rtbOut,
    .redFocus .rtbMid,
    .redFocus .rtbIn
    {
        font-style: italic !important;
        background-image: none !important;
        background-color: green !important;
    }
     
    .redHover1 a.rtbWrap,
    .redHover1 .rtbOut,
    .redHover1 .rtbMid,
    .redHover1 .rtbIn
    {
        font-style: italic !important;
        background-image: none !important;
        background-color: green !important;
    }
     
    .redFocus1 a.rtbWrap,
    .redFocus1 .rtbOut,
    .redFocus1 .rtbMid,
    .redFocus1 .rtbIn
    {
        font-style: italic !important;
        background-image: none !important;
        background-color: green !important;
    }


    Using the same approach you can apply different classes to the other RadToolBarButtons.



    All the best,

    Kate
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  6. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 01 Jun 2011 Link to this post

    Hello Daniele,

    I just noticed that the links that I sent you are broken. Here are the correct ones:
    http://www.telerik.com/help/aspnet-ajax/toolbar-appearance-css-selectors.html
    http://www.telerik.com/help/aspnet-ajax/toolbar-appearance-item-css-class.html

    All the best,
    Kate
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017