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,332
    Answers
    124
    Vote Rating
    83
    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
    529
    Answers
    4
    Vote Rating
    17
    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.

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar