How can "hover buttons" be done in webclient?

Classic Servoy
1

Is it possible to have a “hover button” in webclient that swaps out two images when a mouse is placed over it, to show the button as “highlighted”?
If yes, sample code would be greatly appreciated.

Dean Westover
Choices Software, Inc.

2

Hi Westy.

Try this example. Note that display type of ‘html’ variable is HTML_AREA.

Best regards. Roberto.

temp.servoy (27.5 KB)

3

Roberto,

Thank you for your example solution. It is perfect and you have made it easy to understand.

Very much appreciated!

Dean Westover
Choices Software, Inc.

4

Hey Roberto - thanks for this, really appreciated

5

The “hover buttons” are working great in Servoy 5.1, but not in 3.5. Is this approach possible in version 3.5?

If not, what is the earliest version of Servoy that supports this technique?

Dean Westover
Choices Software, Inc.

6

We are on Servoy 6.x now and the hover buttons are working great. There is just one issue; the hover is applied to all buttons on the form. How can the code be changed to make the hover apply only to specific buttons on a form? Our existing code is similar to this:

<html>
<head>
<style type='text/css'>.button {background: url(media:///ButtonDefaultColor.gif) no-repeat;
width: 113px; height: 27px;color: white; } .button:hover { background: url(media:///ButtonHoverColor.gif) no-repeat; 
width: 113px; height: 27px; color: black;} 
</style> 
</head> 
<body> 
</body>
</html>

Dean

7

If you use CSS styles to define the hover image you need to define multiple css styles and assign them to your button accordingly. In the worst scenario (where you want to set a different image per every button) you will have to define and apply one style per button.
It would be nice if the property “rollover-image” would work also in webclient.

8

It would be nice if the property “rollover-image” would work also in webclient.

have you tried this in the latest 6 version??
This already works! :-)