Indivdual sprite files

2 posts, 0 answers
  1. Paul
    Paul avatar
    23 posts
    Member since:
    Sep 2006

    Posted 10 Sep 2010 Link to this post

    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
  2. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 15 Sep 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top