What's New?

[CLOSED] Highlighting a stand-alone image (lie a GridCommand)

  1. #1
    Mar 14, 2010, 11:26 AM

    [CLOSED] Highlighting a stand-alone image (lie a GridCommand)

    I am trying to replicate what the mouse-over effect of a GridCommand. I have a stand-alone Html <img /> tag, and I want to highlight it in javascript exactly like a GridCommand icon gets highlighted on a mouse-over.

    How can I accomplish this??
  2. #2
    Mar 14, 2010, 6:19 PM

    RE: [CLOSED] Highlighting a stand-alone image (lie a GridCommand)

    Hi,

    GridCommand is Toolbar control (column uses Toolbar to show commands, each GridCommand is Ext.Net.Button inside Ext.Net.Toolbar). Ext.Net.Button has complex structure (markup, css, javascript) therefore I don't think that you can realize it with IMG tag only
  3. #3
    Mar 15, 2010, 12:37 AM

    RE: [CLOSED] Highlighting a stand-alone image (lie a GridCommand)

    vladimir (3/14/2010)

    GridCommand is Toolbar control (column uses Toolbar to show commands, each GridCommand is Ext.Net.Button inside Ext.Net.Toolbar).
    Hi vlad, I understand that, and therefore was looking at a way to replicate it somehow. I have no option but to use a classical <img /> tag here, and I need it to act like a button. Its trivial to add a click handler to the image, the main point is providing some visual feedback to the client, that the image is clickable. I tried highlight() etc methods for ExtJs elements, however all of them feel a bit awkward.


    Any better suggestion to provide a visual feedback that an image is clickable when the mouse moves over it???
  4. #4
    Mar 15, 2010, 1:46 AM

    RE: [CLOSED] Highlighting a stand-alone image (lie a GridCommand)

    Is the image always the same fixed size? or do you need the background/border image to be able to resize in proportion to the height/width of the <img>?

    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  5. #5
    Mar 15, 2010, 3:40 AM

    RE: [CLOSED] Highlighting a stand-alone image (lie a GridCommand)

    Well the image is currently fixed size (16x16). So a fixed size solution should be great.
  6. #6
    Mar 15, 2010, 1:30 PM

    RE: [CLOSED] Highlighting a stand-alone image (lie a GridCommand)

    Hi,

    You can use hover pseudo css rule to implement hover effect

    <%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    
    <style type="text/css">
        .img-button{
            width:22px;
            height:21px;
            background: white url(normal.png);
            cursor:default;
        }
        
        .img-button:hover{
            background: white url(hover.png);
            cursor:pointer;
        }
        
        .another-button{
            width:22px;
            height:21px;
            cursor:default;
            border: solid 1px transparent;
        }
        
        .another-button:hover{
            cursor:pointer;
            border: solid 1px red;
        }
    </style>
</head>
<body style="padding:10px;">
    <form runat="server">
        <ext:ResourceManager runat="server" />
        
        
            <img src="s.gif" class="img-button" />
        

        
        <br />
        <br />
        
        
            <img src="normal.png" class="another-button" />
        

    </form>
</body>
</html>

  7. #7
    Mar 15, 2010, 2:45 PM

    RE: [CLOSED] Highlighting a stand-alone image (lie a GridCommand)

    Well, that was clever. Although I was not actually expecting that (static screenshots for a hover effect), I might actually end up using it if I do not find a better approach. Thanks..

    However, there is a problem here also. The images I am using do not actually belong to the Fam Fam set. Even if I follow your approach, I will need to get the images in the Grid Command column for taking their screenshots. I think I would be able to use the IconCls property for a GridCommand to get my custom images inside the Grid for taking the screenshot.


    This might well work as my current images are sized 16x16. But what if the same solution is desired for a larger image? Geoff hinted above something for variable sized images. I wonder if there could be a similar trick for larger or variable sized images!!!
  8. #8
    Mar 15, 2010, 2:57 PM

    RE: [CLOSED] Highlighting a stand-alone image (lie a GridCommand)

    Hi Rahul,

    If you're looking for a resizable background-image, then you're need to go with the 'sliding doors' css technique. There's lots of information available online for 'sliding doors'.

    Basically you'll have to wrap the <img> in two nested 's and set a different background-image for each . The online tutorials explain everything.

    Hope this helps.

    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  9. #9
    Mar 15, 2010, 3:24 PM

    RE: [CLOSED] Highlighting a stand-alone image (lie a GridCommand)

    Thanx geoff for the information. I will research the "sliding doors" technique you discussed further.

Similar Threads

  1. [CLOSED] How to prevent text highlighting on GridPanel row double-click?
    By vadym.f in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Jun 15, 2012, 12:43 PM
  2. [CLOSED] ext:Image - How I can show a menu when click in ext:Image?
    By supera in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: May 10, 2012, 8:56 PM
  3. [CLOSED] Highlighting TreeNode without firing selection change
    By amitpareek in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Dec 05, 2011, 3:45 PM
  4. [CLOSED] [1.0] GridPanel and highlighting
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Nov 17, 2010, 10:30 PM
  5. Stop Rows from Highlighting on Selection
    By Juls in forum 1.x Help
    Replies: 4
    Last Post: Apr 17, 2009, 5:36 PM

Posting Permissions