This is a migrated thread and some comments may be shown as answers.

Change button background image on mouse over ad on click

4 Answers 278 Views
ToolBar
This is a migrated thread and some comments may be shown as answers.
Daniele
Top achievements
Rank 1
Daniele asked on 26 May 2011, 02:36 PM
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

4 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 26 May 2011, 03:16 PM
Hello Daniele,

You can achieve this by using the hover selector.

Check out the following demo.
ToolBar / Unique Item Appearance

Thanks,
Princy.
0
Daniele
Top achievements
Rank 1
answered on 27 May 2011, 10:26 AM
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
0
Kate
Telerik team
answered on 01 Jun 2011, 12:01 AM
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.

0
Kate
Telerik team
answered on 01 Jun 2011, 06:05 PM
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.

Tags
ToolBar
Asked by
Daniele
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Daniele
Top achievements
Rank 1
Kate
Telerik team
Share this question
or