[CLOSED] How to change the appearence of a button when the mouse is hovered on a button or the button is clicked?

[flormariafr]

Hi,

I have some button options to laoad pages, I need to change the appearence to the image an label when the mouse is hover and I clck a button.

<ext:ImageButton 
    ID="ImageButtonMenusOffice" 
    runat="server"
    StyleSpec="position:relative; display:block; top:40px; left:5px;"
    ImageUrl="~/App_Themes/ChampWeb/Images/btnMenusOffice.png">
    <Listeners>
        <Click Handler="#{Panel2}.load({url: './DoctorNedOffice.aspx', mode:'iframe'});" />
    </Listeners>
</ext:ImageButton>

<ext:Label 
    ID="LabelMenusOffice" 
    runat="server" 
    Text="Dr. Office"
    StyleSpec="position:relative; display:block; top:10px; left:60px;"
    />

[Vladimir]

Hi,

Please use OverImageUrl and PressedImageUrl properties
Please see the following sample
https://examples1.ext.net/#/Buttons/Basic/ImageButton/

[flormariafr]

The only way that you have to change the appearence is creating an image for each stage like when the controls are pressed or clicked or do you have a way to chage the apparience using style?

[Vladimir]

Hi,

You can apply any css class to the image button:


1. OverCls property


overCls : StringAn optional extra CSS class that will be added to this component's Element when the mouse moves over the Element, and removed when the mouse moves out. (defaults to ''). This can be useful for adding customized 'active' or 'hover' styles to the component or any of its children using standard CSS rules.


2. Use Click listener and apply required css class

<Click Handler="this.addClass('myCssClass');" />