Custom Style Definition (image) updation in runtime Button Hover?

[jaswanth]

I am trying to update Style Definition through a service and I have done updating background color and font color but unable to update image.How to Update Image in it? I used code below to update style through bindings.

(updatePropertyInfo.TargetProperty === 'Style') {
var LabelStyle = TW.getStyleFromStyleDefinition(this.getProperty('Style', 'DefaultLabelStyle'));
var currentTextSizeClass = TW.getTextSizeClassName(LabelStyle.textSize);

this.setProperty('Style', updatePropertyInfo.SinglePropertyValue);
LabelStyle = TW.getStyleFromStyleDefinition(this.getProperty('Style', 'DefaultLabelStyle'));
LabelStyle = (LabelStyle.styleDefinitionName === undefined) ? TW.getStyleFromStyleDefinition('DefaultLabelStyle') : LabelStyle;

var element = this.jqElement.find('.label-text');
element.removeClass(currentTextSizeClass);
element.addClass(TW.getTextSizeClassName(LabelStyle.textSize));
var LabelStyleText = TW.getStyleCssTextualNoBackgroundFromStyle(LabelStyle);
element.css(convertStyleToCssObj(LabelStyleText));
(!LabelStyle.foregroundColor.length > 0) ? element.css('color', '') : '';
document.getElementById(thisWidget.jqElementId).style.cssText += TW.getStyleCssGradientFromStyle(LabelStyle) + LabelStyleText;
}
};

var convertStyleToCssObj = function(style) {
var styleObjResult = {};
var styleArray = style.split(';');
for (var i = 0; i < styleArray.length; i++) {
var propertyArray = styleArray[i].split(':');
styleObjResult[propertyArray[0].replace(/\s/g, '')] = propertyArray[1];
}
return styleObjResult;
};

Can any one suggest changes in code or Is there any other way

my requirement is to show a style(style definition) having binding in a button widget

[PaiChung]

I believe if you use an image widget, the image itself is bindable, so you can run a service to resolve what media entity you want to display and return that and bind that to the widget.

[jaswanth]

My requirement is to show a image on Button Hover and How can i make the Image widget visible when its Hovered over the Button(Is there a way to check button hover and give image)and I want to know how to update style Definition Image cause there is a way to update foreground,background through above code.

[PaiChung]

For Hover OOTB we only support an 'On Hover' Style definition. (No events to run a service)

Beyond that you'd have to use CSS and I'm not very good with CSS

[slangley]

Hi @jaswanth.

If you have found a solution to your problem, please feel free to post it here and mark it as the Accepted Solution for the benefit of others on the community.

Regards.

--Sharon

[jaswanth · Accepted solution]

I used Image Overlay(Search Google for css_image_overlay_fade) with this we can get image over hover but I was unable to do this through CSS updation during Runtime