Sprite for button images and hover

6 posts, 0 answers
  1. Iggy
    Iggy avatar
    40 posts
    Member since:
    Jul 2005

    Posted 18 Feb 2009 Link to this post

    Is there a way to use a sprite for the button images and get the hover affect using another part of the sprite?  I am currently setting the ImageUrl and HoveredImageUrl properties but with 10 buttons that causes 20 images to download.  I would prefer to get that down to 1 image if possible.

    Thanks.
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 20 Feb 2009 Link to this post

    Hi,

    I found the following link which explains how to use sprite image to show different images while rollovers on your buttons. I hope this will give you some insights on using CSS sprites.
    http://www.lightpostcreative.com/image-sprites-tutorial/

    Regards
    Shinu
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Iggy
    Iggy avatar
    40 posts
    Member since:
    Jul 2005

    Posted 20 Feb 2009 Link to this post

    Thanks.  I have used sprites before but for the Toolbar buttons where it has a separate image and text I didn't figure it out immediately.  The toolbar button has a property to specify the image and another property to specify the Hover image, but that's two separate images.  What I needed was a way to specify the CSS specifically for the image so I could specify the image in a class and then also shift that image on hover.  I did get this to work though.  I looked at the structure of the toolbar button on the page and then created css classes that applied only to the image.  Here's what I came up with:

    1. Button control in the aspx.  Specify the class, and then also specify an image.  Shim.gif is a 1px transparent image, this just forces the toolbarbutton to create an image when it renders the control on the page.
    <telerik:RadToolBarButton runat="server" CssClass="ToolbarHomeIcon" ImageUrl="~/Images/shim.gif" ></telerik:RadToolBarButton>   

     

     

     

     

    2.  CSSClasses for sprite control.  You cannot you the Hover pseudo-class (":Hover" appended to the img class name) to adjust the sprite image to show the Hovered image because that would only show when you hover over the image, not the text or border portion of the button.

     

    a.ToolbarHomeIcon img.rtbIcon      
    {     
      backgroundtransparent url(Images/house_sprite_16x16.png) no-repeat 0 0;      
      height16px;      
      width16px;      
    }     
        
    li.rtbItemHovered a.ToolbarHomeIcon img.rtbIcon    
    {     
      backgroundtransparent url(Images/house_sprite_16x16.png) no-repeat 0 -18px;      
    }     
     
  5. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 22 Feb 2009 Link to this post

    Hello Ignacio,

    There are several ways to do this, you already discovered one of them. You are right about the :hover pseudo-class, but you can use :hover on the parent elements of the image too. So you can alter the CSS like this:

    a.ToolbarHomeIcon:hover img.rtbIcon 
    {      
      backgroundtransparent url(Images/house_sprite_16x16.png) no-repeat 0 -18px;       

    Alternatively you can use the HoveredCssClass attribute of the RadToolBarButton to achieve the same result.

    All the best,
    Kamen Bundev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  6. Rick
    Rick avatar
    49 posts
    Member since:
    Oct 2008

    Posted 09 Sep 2009 Link to this post

    I just have another question regarding the use of sprites with the Toolbar.

    Presumably you HAVE to declare an image in the ImageURL property, in order for the rtbIcon element to be rendered. So your aspx might be:

    <telerik:RadToolBarButton runat="server" CssClass="SpriteNew" ImageUrl="~/Images/blank.gif" />  


    Then the CSS might be 
    a.SpriteNew img.rtbIcon { backgroundtransparent url(../../images/icons/sprite.gif) no-repeat 0 0; } 

    However, if I have a Toolbar with 10 buttons, this would require 11 HTTP requests - 10 to Images/blank.gif, and 1 to images/icons/sprite.gif

    Or do I have that wrong - would it only request the blank.gif image once thereby reducing the requests to 2? Is there a way to not have to declare the dummy ImageURL?
  7. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 11 Sep 2009 Link to this post

    Hello Rick,

    Yes, you've got it wrong - if the browser cache is enabled (which is by default), the requests will be only 2. Unfortunately using this method you should specify image url in IE 6 and 7 (in all other browsers you can use data:uri to do embed the image inside).

    Regards,
    Kamen Bundev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017