1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    3
    Vote Rating
    0
    Jatin Dora is on a distinguished road

      0  

    Default Unanswered: How to change the background image of button on hovering mouse over it.

    Unanswered: How to change the background image of button on hovering mouse over it.


    Hi,

    On hovering a mouse over a button i want to change the image placed over the button.
    All suggestions are welcome.

    Thanks in Advance

  2. #2
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Answers
    124
    Vote Rating
    85
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    Hi,
    You can change the background image of the button on hover through the concept of pseduo classes of CSS. Just give a class to your button like given in following code:

    Code:
    {
         xtype: 'button',
         text: 'click me',
         cls: 'myClass'
         align: 'left'
    }
    Then just define the css style for 'myClass' like below:
    HTML Code:
    <style type="text/css">  .myClass{background:url(/extjs-4.1.0/examples/restful/images/user.gif);height:16px;width:16px;}  .myClass:hover{background:url(/extjs-4.1.0/examples/restful/images/add.gif);}</style>
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    3
    Vote Rating
    0
    Jatin Dora is on a distinguished road

      0  

    Default


    I have tried it already but have no output its not functional in Sencha Touch2.0. I have this piece of code
    {
    xtype : 'button',
    // ui : 'action',
    cls : 'buyticketsimg',
    docked : 'right',
    pressedCls : '',
    action : 'onBuyTicketTap'
    }

    In style.css
    .buyticketsimg
    {
    background: url('buyticketdown.png')no-repeat;
    width : 105px;
    height : 159px;
    margin : 0 5% 0 0;
    border-radius: 0;
    border: none;
    }
    .buyticketsimg :hover
    {
    background: url('myticketdown.png')no-repeat;
    width : 105px;
    height : 159px;
    margin : 0 5% 0 0;
    border-radius: 0;
    border: none;
    }


    It does't work....
    any other suggestion is welcome.

  4. #4
    Sencha User
    Join Date
    Sep 2012
    Posts
    4
    Vote Rating
    0
    narasimhaks is on a distinguished road

      0  

    Default


    Hi Jatin,

    I am also facing the same issue. were you able to resolve the issue? If yes then how?

    Thanks in advance

  5. #5
    Ext JS Premium Member
    Join Date
    Apr 2010
    Location
    Omaha, NE
    Posts
    557
    Answers
    8
    Vote Rating
    25
    estesbubba will become famous soon enough estesbubba will become famous soon enough

      0  

    Default


    Remember, this is a mobile touch-based framework and your finger is the input and not a mouse on devices so the concept of hover doesn't really exist.

  6. #6
    Sencha User
    Join Date
    Sep 2012
    Posts
    4
    Vote Rating
    0
    narasimhaks is on a distinguished road

      0  

    Default


    Thanks for the quick reply estesbubba!!

    I am trying to load a css for a button. And when i click on the button i get a grey image instead of a hover. How to achieve it? It works like a champ on android version 4.0 and above. But not on lower versions of android. Does sencha touch 2 not support on lower versions of android? Please help!!

    Thanks in advance.