Two questions about images & css

Classic Servoy
1

Hi all,

we are wondering to change images in buttons(/labels) through css style sheets (using background-image: url(media:///myImage.png); as seen in Servoy Wiki), and we have two questions:

Could we show external images (I mean, images not in media with full http path or a relative path to application_server or server folder) with url() function?

Something like:

myStyle
{
   background-image: url(myImage_folder/myImage.png);
}

Could we have a rollover image to this buttons/labels with hover css property?

Something like:

myStyle:hover
{
  background-image: url(myImage_folder/my_rollOverImage.png);
}

Thanks in advance!

P.S.: both things are not mentioned as supported in Wiki, but perhaps exists a workaround or something like that…

2

Hi gerardo,

gerardo.gomez:
Could we show external images (I mean, images not in media with full http path or a relative path to application_server or server folder) with url() function?

Let suppose that you have a folder images that contains your images and
is located in your {servoy_HOME}/application_server/server/webapps/ROOT.

you can use:
Let suppose your server is local
myStyle
{
background-image: url(http://localhost:8080/images/myImage.png);
}

according to the tests I’ve done, it works in web client :P but not in smart client :(.

gerardo.gomez:
Could we have a rollover image to this buttons/labels with hover css property?

Something like:
CODE: SELECT ALL
myStyle:hover
{
background-image: url(myImage_folder/my_rollOverImage.png);
}

according to the tests I’ve done, it doesn’t work in both smart client and web client

3

madimane:
Let suppose that you have a folder images that contains your images and
is located in your {servoy_HOME}/application_server/server/webapps/ROOT.

you can use:
Let suppose your server is local
myStyle
{
background-image: url(http://localhost:8080/images/myImage.png);
}

according to the tests I’ve done, it works in web client :P but not in smart client :(.

Yes, and you can use the background-repeat: no-repeat; although is not referred in wiki.