Indivdual sprite files

[Paul]

Hi, I am using the Menu component, and trying to use individual 'sprites' for each menu item
The items are created dynamically from data from a database, and each is assigned an image file to its ImageUrl property.
The images consist of the image in 2 states, horizontally in the file - the normal image and a highlight image.

When the menu is displayed, it shrinks the entire image to fit the 24px size, rather than trimming it.
My CSS is shown below.

.RadMenu img.rmLeftImage
{
  width: 24px;
  height: 24px;
  margin: 1px 2px 0 -3px;
  padding-bottom: 3px;
  background-position: -2px 0;
  background-repeat: no-repeat;
}

Is there a way to:
1. Trim the image instead of resizing it.
2. Change the source position so that the highlight image is shown on rollover.

Thankyou.

Paul

[Kamen Bundev]

Hello Paul,

This is an example how you can do image rollovers with the clip CSS property in the Default and Telerik skins:
.RadMenu a.Clippy .rmLeftImage
{
    left: 0;
    position: absolute;
    clip: rect(0, 16px, 16px, 0);
    *clip: rect(0 16px 16px 0);
}
.RadMenu a.Clippy:hover .rmLeftImage
{
    left: -16px;
    clip: rect(0, 32px, 16px, 16px);
    *clip: rect(0 32px 16px 16px);
    zoom: 1;
}
.RadMenu ul.rmRootGroup a.Clippy span.rmText
{
    padding-left: 24px;
}

The example is intended for 16x16 images, so in your case, change the positions accordingly. You will also need a CssClass="Clippy" set on all such RadMenuItems. The clip property positions are defined like this - top, right, bottom, left.

The same example for the rest of the skins has some differences:
.RadMenu a.Clippy .rmLeftImage
{
    left: 8px;
    position: absolute;
    clip: rect(0, 16px, 16px, 0);
    *clip: rect(0 16px 16px 0);
}
.RadMenu a.Clippy:hover .rmLeftImage
{
    left: -8px;
    clip: rect(0, 32px, 16px, 16px);
    *clip: rect(0 32px 16px 16px);
    zoom: 1;
}
.RadMenu ul.rmRootGroup a.Clippy span.rmText
{
    padding-left: 12px;
}

I've only tested it with root elements but the idea is the same for the rest.

Best wishes,
Kamen Bundev
the Telerik team