Change custom tool imageUrl on mouseover

[Nelbin]

Is there any function/javascript regarding mousever event? I want to change the image of my custom tool once it is hovered by the mouse pointer. Thanks in advance!

[Shinu]

Hi Nelbin

Try the following CSS to change custom ImageUrl on mousehovering.
CSS:

<style type="text/css">
 .RadImageEditor .rieInsertImage .rtbIcon:hover
  {
    background-image:url('yourimage.gif');
  }
</style>

Thanks
Shinu

[Nelbin]

HI Shinu,

the CSS isn't working. I tried that too but still not executing. FYI I also have two custom buttons in the ImageEditor

[Vessy]

Hello Nelbin,

The provided by Shinu approach is the correct one, I guess that you will need to use a little bit heavier selectors in order to apply those styles to your custom buttons:

.RadImageEditor .rieInsertImage.rieBackgroundImg span.rtbIcon:hover
{
    background-image: url('yourimage.gif');
    background-position: center;
}

Another thing you can try is to add !important to the styles:

.RadImageEditor .rieInsertImage.rieBackgroundImg span.rtbIcon:hover
{
    background-image: url('yourimage.gif') !important;
    background-position: center !important;
}

Note, that in order to apply the styles above the highlighted part of the selector have to be exactly the same like the custom CommandName that you want to apply them to.

Regards,
Veselina Raykova
Telerik