Change background color on mouse hover.

[jeremysingh15]

Hi,

Before i start writing the problem, it might be a simple thing but i am not getting a good way of doing this.

I have a bunch of button on a form.I want when user hovers over the button its color should change to indicate the selected one. We have image rollover properties but i want to chnage the background color like we have :hover properties in css. I tried with this but seems to be not workngg inmy case
I want that in both smart and web clinent.

Can someone please show me a lead to proceed as i might be some way.

Thanks for the help in advance.
JS

[jeremysingh15]

Any help on this, is there any alternative of mouse hover effect or there is any event to capture onMouseOver / Out event..

Thanks..

[david]

Doable in web client but not via Servoy's default style sheets as they don't support :hover. So you'll need an external style sheet which you attach to your runtime with a call to:

Code: Select all

plugins.WebClientUtils.addCssReference('http://yourserver.com/css/yourstyle.css')

In that style sheet create a css class along the lines of:

Code: Select all

.my-button { background-color:#000000; }
.my-button:hover { background-color:#00ff00; }

Then when show a form, assign the my-button style to your buttons:

Code: Select all

plugins.WebClientUtils.setExtraCssClass(elements.btn_find, 'my-button');

[jeremysingh15]

Thanks David for this awesome explanation, but the need is basically for the smart client. In my case web client is optional.

Only way to do this is the rollover image?
Is there no way to do it in smart client with only background color??

I have lots of button in a single form,will it cause a performance issue if i attach two images (if i use rollover image property) with buttos as we face problem in web development..?

Any suggestions??
Thanks

[david]

Only way in smart client is with rollover image.

In web client, there is a slight delay the first time you rollover a particular image that has a rollover while Servoy goes and fetches the image via ajax. For the rest of the session that rollover image is cached. So things will work as you move to web client.

We have a few buttons with images but for the most part, for web client we've defined our button styles in an external style sheet to take advantage of all the latest css3 tricks (gradients, border rounding, hover state, etc) and for performance reasons.