TUniImage mouse over

[WagnerAlexandre]

Hello friends,

 

I would like to know how to change the image of a TUniImage when the mouse passes over.

 

Thank you very much in advance.

[DFong]

TUniImage->ClientEvents->ExtEvents:

 

function Onmouseout(sender)
{
sender.getEl().setStyle("background-image","url(Files/mouseout.png)");

}

 

function Onmouseover(sender)
{
sender.getEl().setStyle("background-image","url(Files/mouseover.png)");

}

[WagnerAlexandre]

Thanks!

[delagoutte]

It seems that this issue don't work.

 

If you set an TuniImage with url property.

 

So i try with css :

.ribbon-btn
{
  background-image: url('./assets/images/Ribbon.png');
  background-repeat: no-repeat;
}

.ribbon-btn:hover
{
  background-image: url('./assets/images/Ribbon_MO.png');
  background-repeat: no-repeat;
}

+

RibbonBtn.JSInterface.JSConfig('cls',['ribbon-btn']);

but with same result.

the url was defined on url property of unimage is foreground and it mask the image of css.

 

If i don't define url and If i analyze we can see the html source code define backgound to none so the css can't be applied.

<div class="x-component ribbon-btn x-abs-layout-item x-component-default" style="background:none;clip:rect(0px,45px,40px,0px);left:0px;top:0px;width:45px;height:40px;" id="O130_id">
</div>

Have you got a solution please

[delagoutte]

issue :

For UniImage , not set url property.

and for css add important!

.ribbon-btn
{
  background-image: url('./assets/images/Ribbon.png') !important;
  background-repeat: no-repeat !important;
}

.ribbon-btn:hover
{
  background-image: url('./assets/images/Ribbon_MO.png') !important;
  background-repeat: no-repeat !important;
}

+

RibbonBtn.JSInterface.JSConfig('cls',['ribbon-btn']); 

Thanks Delphi Dev