hover opacity not working for Img

[dbscott525]

I am using SmartGWT 5.0-p20141231.

Here is the test case:

HStack layout = new HStack();
layout.setBackgroundColor("black");
Img img = new Img("Classifier/log-out-icon.png", 16, 16);
img.setOpacity(50);
img.setShowHover(true);
img.setHoverOpacity(100);
layout.addMember(img);
layout.draw();

img.setOpacity(50) works by showing the 50% opacity.

However, hovering over the image has no effect on the opacity. It should change the opacity to 100%.

I’ve attached the image file.

[Isomorphic]

That isn't what hoverOpacity does - it sets the opacity of the canvas that shows when showHover is set to true. See the docs.

[dbscott525]

That isn't what hoverOpacity does - it sets the opacity of the canvas that shows when showHover is set to true. See the docs.

When I follow the link to setHoverOpacity is says:

public void setHoverOpacity(Integer hoverOpacity)

If this.showHover is true, should the hover canvas be shown with opacity other than 100?

Parameters:
hoverOpacity - Default value is null

See Also:
setShowHover(java.lang.Boolean), Hovers / Tooltips Example

I’m having a hard time understanding or interpreting this documentation as to what its meaning is. Can you point me to a document with more elaboration on the topic?

I tried to handle this with the following style:

log-out-image { 
	opacity: 0.5;
}

log-out-imageHover,
log-out-imageOver
{ 
    opacity: 1;
}

Here is the code which uses the CSS style:

HStack layout = new HStack();
layout.setBackgroundColor("black");
Img img = new Img("Classifier/log-out-icon.png", 16, 16);
img.setStyleName("log-out-image");
layout.addMember(img);
layout.draw();

In this case the style has no effect on the image and over/hover also has no effect.

I also tried using setBaseStyle which also had no effect.

I’m trying to change the opacity of the image based the mouse being over or off the image. What is the best way to do this?

[Blama]

Hi dbscott525,

I don't know if it's the best way, but you could use addMouseOutHandler() and addMouseOverHandler() for either the HStack or the Img and change the image properties there.

Best regards
Blama

[Isomorphic]

setHoverOpacity will set the opacity of the hover canvas. This is the separate canvas which pops up when the user holds the mouse over a widget and hesitates, containing (typically) the "prompt" text for the widget. The "tooltip window", if you like.
If you want to learn more about the hover subsystem, drill into the documentation around canHover, showHover, prompt, etc.

If you want to change the opacity of a widget when the user mouses over / mouses out, Blama's suggestion is the easiest approach - add a mouseOver / mouseOut handler and explicitly call setOpacity() on the widget within those handlers.

Regards
Isomorphic Software

[dbscott525]

Hi dbscott525,

I don't know if it's the best way, but you could use addMouseOutHandler() and addMouseOverHandler() for either the HStack or the Img and change the image properties there.

Best regards
Blama

Thanks guys. This is what I ended up doing. I put the handlers on the HStack because the UI calls for additional stuff in the HStack and hopefully the opacity will apply too all the contents. Works great!