Sprite for button images and hover

[Iggy]

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.

[Shinu]

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

[Iggy]

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
{
  background: transparent url(Images/house_sprite_16x16.png) no-repeat 0 0;
  height: 16px;
  width: 16px;
}

li.rtbItemHovered a.ToolbarHomeIcon img.rtbIcon
{
  background: transparent url(Images/house_sprite_16x16.png) no-repeat 0 -18px;
}

[Kamen Bundev]

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
{
  background: transparent 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.

[Rick]

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 { background: transparent 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?

[Kamen Bundev]

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.