PC SOFT

ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Home | Sign in | French EN
This content has been translated automatically. Click here to view the French version.
  • Overview
  • Images associated with a button in a window
  • Images associated with a button in a page
  • Image of button and CSS style
  • Image of button and specific options
  • Advanced configuration of images
  • Image of multilingual button
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Others
Stored procedures
Images and buttons
Overview
To optimize the appearance of your screens or sites, you have the ability to use images in your buttons.
Images associated with a button in a window
Images associated with a button in a page
Versions 19 and later
WEBDEV - Server code In a page, the images associated with a button can be defined in the style of button:
  • via the CSS style ("CSS button" element of "Style" tab in the control description).
  • via the image options ("Button (Images)" element of "Style" tab in the control description).
New in version 19
WEBDEV - Server code In a page, the images associated with a button can be defined in the style of button:
  • via the CSS style ("CSS button" element of "Style" tab in the control description).
  • via the image options ("Button (Images)" element of "Style" tab in the control description).
WEBDEV - Server code In a page, the images associated with a button can be defined in the style of button:
  • via the CSS style ("CSS button" element of "Style" tab in the control description).
  • via the image options ("Button (Images)" element of "Style" tab in the control description).
Versions 19 and later
WEBDEV - Server code

Image of button and CSS style

To define the image associated with the button via the CSS style:
  1. Display the "Style" tab in the description window of control.
  2. Select the "Button (CSS)" element.
  3. Display the advanced options ("More options" link).
  4. In the "Background" tab, you have the ability to define the image used and its characteristics.
New in version 19
WEBDEV - Server code

Image of button and CSS style

To define the image associated with the button via the CSS style:
  1. Display the "Style" tab in the description window of control.
  2. Select the "Button (CSS)" element.
  3. Display the advanced options ("More options" link).
  4. In the "Background" tab, you have the ability to define the image used and its characteristics.
WEBDEV - Server code

Image of button and CSS style

To define the image associated with the button via the CSS style:
  1. Display the "Style" tab in the description window of control.
  2. Select the "Button (CSS)" element.
  3. Display the advanced options ("More options" link).
  4. In the "Background" tab, you have the ability to define the image used and its characteristics.
Versions 19 and later
WEBDEV - Server code

Image of button and specific options

To define the image associated with the button via the WEBDEV options:
  1. Display the "Style" tab in the description window of control.
  2. Select the "Button (Images)" element.
  3. Two types of images can be used:
    • An image sheet.
      This image sheet contains:
      • horizontally: the different states of the button: idle, pressed, grayed, selected, hovered.
      • vertically: the different states for the button animation (5 or 6 steps are recommended).
    • Independent images. In this case, only the image of normal status and the image of hovered status are supported.
      • Normal: this image will be used to represent the button.
      • Rollover: this image will be displayed when the button is hovered by the mouse cursor. If this image is not specified, no rollover effect will be available.
      • The "Catalog" option of Drop-down button button allows you to choose the two types of images among a library of images supplied with WEBDEV. To do so, you must:
        1. Click the Drop-down button button and select "Catalog".
        2. Select the "<All>" theme.
        3. Select "Graphic buttons".
        4. Select the requested button.
        5. Validate, specify the characteristics of the image to generate and validate. The two images are automatically copied into your project and assigned to the button.
      • The option "Merge the images in a sheet" is used to avoid the blinking effect when changing image during the rollover.
Remark: The "Stretch" option is used to manage the stretching of images associated with the button when the button is resized in the editor. You can:
  • stretch the image in width,
  • stretch the image in width and height,
  • use the 9-slice scaling to configure the stretching.
New in version 19
WEBDEV - Server code

Image of button and specific options

To define the image associated with the button via the WEBDEV options:
  1. Display the "Style" tab in the description window of control.
  2. Select the "Button (Images)" element.
  3. Two types of images can be used:
    • An image sheet.
      This image sheet contains:
      • horizontally: the different states of the button: idle, pressed, grayed, selected, hovered.
      • vertically: the different states for the button animation (5 or 6 steps are recommended).
    • Independent images. In this case, only the image of normal status and the image of hovered status are supported.
      • Normal: this image will be used to represent the button.
      • Rollover: this image will be displayed when the button is hovered by the mouse cursor. If this image is not specified, no rollover effect will be available.
      • The "Catalog" option of Drop-down button button allows you to choose the two types of images among a library of images supplied with WEBDEV. To do so, you must:
        1. Click the Drop-down button button and select "Catalog".
        2. Select the "<All>" theme.
        3. Select "Graphic buttons".
        4. Select the requested button.
        5. Validate, specify the characteristics of the image to generate and validate. The two images are automatically copied into your project and assigned to the button.
      • The option "Merge the images in a sheet" is used to avoid the blinking effect when changing image during the rollover.
Remark: The "Stretch" option is used to manage the stretching of images associated with the button when the button is resized in the editor. You can:
  • stretch the image in width,
  • stretch the image in width and height,
  • use the 9-slice scaling to configure the stretching.
WEBDEV - Server code

Image of button and specific options

To define the image associated with the button via the WEBDEV options:
  1. Display the "Style" tab in the description window of control.
  2. Select the "Button (Images)" element.
  3. Two types of images can be used:
    • An image sheet.
      This image sheet contains:
      • horizontally: the different states of the button: idle, pressed, grayed, selected, hovered.
      • vertically: the different states for the button animation (5 or 6 steps are recommended).
    • Independent images. In this case, only the image of normal status and the image of hovered status are supported.
      • Normal: this image will be used to represent the button.
      • Rollover: this image will be displayed when the button is hovered by the mouse cursor. If this image is not specified, no rollover effect will be available.
      • The "Catalog" option of Drop-down button button allows you to choose the two types of images among a library of images supplied with WEBDEV. To do so, you must:
        1. Click the Drop-down button button and select "Catalog".
        2. Select the "<All>" theme.
        3. Select "Graphic buttons".
        4. Select the requested button.
        5. Validate, specify the characteristics of the image to generate and validate. The two images are automatically copied into your project and assigned to the button.
      • The option "Merge the images in a sheet" is used to avoid the blinking effect when changing image during the rollover.
Remark: The "Stretch" option is used to manage the stretching of images associated with the button when the button is resized in the editor. You can:
  • stretch the image in width,
  • stretch the image in width and height,
  • use the 9-slice scaling to configure the stretching.
Advanced configuration of images

Image of multilingual button

If your site or application is multilingual, a different button image can be selected for each language. This option is useful when the images associated with the button contain the caption of the button.
To manage multilingual images:
  1. Display the description of Button control.
  2. Click the Drop-down button button found beside the image path.
  3. Select the "Multilingual" option.
  4. The window for managing multilingual images is displayed. By default, the same file is associated with all the languages supported by the window or by the page.
  5. For each language, click the Drop-down button button. You can:
    • Select the image corresponding to the language on your computer ("Browse" option).
    • Select the image corresponding to the language in the image catalog ("Catalog" option).
    At run time, the corresponding button image will be displayed according to the language chosen by Nation.
  6. Validate. The "Multilingual value" caption appears in the image name.
Minimum version required
  • Version 9
This page is also available for…
Comments
Click [Add] to post a comment