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.


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

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