1. #1
    Sencha User
    Join Date
    Dec 2009
    Posts
    363
    Vote Rating
    2
    raj_plays is on a distinguished road

      0  

    Default zoom image on mouse over

    zoom image on mouse over


    Hi,
    My grid has a column that displays images in size 100x100.
    On mouse-over on an image(grid cell), I want to zoom the image to size 200x200.
    When the mouse moves away, it should get back to 100x100.
    How can I achieve this?
    Code:
    songGrid = new Ext.grid.GridPanel({
        store: songDataStore,
        columns: [{
            header: "Title",
            width: 200,
            dataIndex: 'Title',
            sortable: true,
            align: 'left'
        }, {
            header: "HD Image",
            width: 100,
            dataIndex: 'ImageUrl',
            renderer: renderImage,
            align: 'center'
        }]...
    });
    
    
    function renderImage(value, metaData, record, rowIndex, colIndex, store) {
        metaData.attr = 'style="cursor: pointer"';
    
    
        return '<img src="' + value + '" width="100" height="100" />';
    }

  2. #2
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,332
    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 raj_plays,
    I think you should use css's pseduo class- ':hover' on that image. You can do that using following steps:
    1. First give a class to the image in the renderer like below:
    Code:
    function renderImage(value, metaData, record, rowIndex, colIndex, store) {
            metaData.attr = 'style="cursor: pointer"';
            return '<img class="imageZoomCls" src="' + value + '" width="100" height="100" />';
    }
    2. Then just define this class with pseduo class- 'hover' like:
    HTML Code:
    <style type="text/css">
       .imageZoomCls:hover{height:200px;width:200px;}
    </style>
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  3. #3
    Sencha User
    Join Date
    Dec 2009
    Posts
    363
    Vote Rating
    2
    raj_plays is on a distinguished road

      0  

    Default


    Thank you, sword-it. It is a great solution.
    But it works on IE not on FF.
    Any fix for FF?
    I tried this but it did not work
    Code:
    div.imageZoomCls:hover{height:200px;width:200px;}

  4. #4
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,332
    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,
    I am wondering why It is not working in Firefox because I tested this solution only in firefox.
    One more thing, the code which I provide to u in that I put the 'imageZoomCls' on <img>.
    Also I define the hover-css like .imageZoomCls:hover{height:200px;width:200px;}.

    But the code that you gave in your last post is - div.imageZoomCls:hover{height:200px;width:200px;}
    If we gave a class to <img> then we must not define that class - 'div.imageZoomCls'. It will only apply on div tag with imageZoomCls.

    If you want to increase the height/width of <img> on hover then, you should define that class in two ways-
    • .imageZoomCls:hover{height:200px;width:200px;} /* generic style*/
    • img.imageZoomCls:hover{height:200px;width:200px;} /* specific style, only apply on img*/
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  5. #5
    Sencha User
    Join Date
    Dec 2009
    Posts
    363
    Vote Rating
    2
    raj_plays is on a distinguished road

      0  

    Default


    I got it to work in FF.
    I had put a space between ".imageZoomCls:" and "hover" in the style class definition. FF did not like that.
    I was experimenting with that class on a div so I used a "div." before the cls.
    Thanks again, sword-it for the solution and the explanation.

  6. #6
    Sencha User
    Join Date
    Mar 2013
    Posts
    2
    Vote Rating
    0
    gurwinder_singh is on a distinguished road

      0  

    Default zoom image on mouse over:

    zoom image on mouse over:


    hi

    what if we want to do image zoom simply(without grid).

    Thanks

  7. #7
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,332
    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 give a class to your <img> and inside CSS, just use hover ...

    Code:
    <img class="imageZoomCls" src="'your Img Src '" width="100" height="100" />'
    
    
    CSS:-
    .imageZoomCls:hover { height:200px;width:200px;}
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

Thread Participants: 2

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