[Tip] "Hover" state for text labels

by David Workman
Data Mosaic

While Servoy is pretty decent at dispaying html and limited CSS it does not support any of the events that you are used to trapping for in standard HTML/Javascript programming.

As a result, we lose the "hover" property of HTML links (the <a href="#">link here</a>) in any text labels. Setting the hover state to be a different font, color, background or font style is a way of highlighting the fact that if you click where your mouse is currently at, something will happen. Servoy does however have a quasi roll-over event for objects -- the rolloverImageMedia property.

I call it a "quasi" event because the only thing you can assign the event is an image. Too bad you can't assign a method! (I guess officially it is considered a property for this reason.) Feature request....

Alright then, let's get a little creative and use the rolloverImageMedia property of one label (label A) to "spoof" a hover event on another label (label B).

As we all have experienced, the more garrish and different the hover state is from the non-hover state the more likely something bad will happen when you click. A free trip to the Bahamas via time-share hell in the swamp lands of Florida if you're lucky. Or a hidden key-logger if you're not.

In this example let's keep everyone home and be subtle about things. Let's just add an underline to a text label when we hover over it.

The basic mechanics is to assign an image to the rolloverImageMedia property of label A, use label B for some text and then place both labels on top of each other. When your mouse "rolls over" the labels, the image of label A will pop up.

The key is to use an image for label A that doesn't cover the text in label B or obscure the back ground color or image if present. For this you need an image that is transparent (which means a gif) except for the underline. To show an underline for 10-12 point type, create a gif image that is 16 pixels tall by 1 pixel wide with the bottom pixel being the color you want and the rest of the image being transparent.

To display correctly, in the mediaOptions for label A set the scale method to "Enlarge" and deselect "Keep aspect ratio." This will stretch your 1 pixel wide image the width of the label object you assign it to. This way the underline image can be used for any width you need.

To save you some work, here are white and black pixel line graphics to download. These are 16 pixels tall so be sure to set label A to 16 pixels tall when using these:

White line graphic
Black line graphic

If you use text labels for buttons, this is a good way to give the user feedback that something will happen when they click the label. Whether that is something good or bad I'll leave up to you... :)