PC SOFT

WINDEVWEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
  • Overview
  • Images associated with a button in a window
  • Images associated with a button in a page
  • Buttons with fixed image or with rollover effect
  • Three-state button
  • 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
WEBDEV - Server code Two types of buttons can be used in a page:
  • Button with fixed image or with rollover effect
  • 3-state button
The aspect of the button is selected in the "General" tab of control description.
The corresponding images are selected in the "Details" tab of the description window of control.
The aspect of the button is selected in the "Style" tab of the description window of control ("Button image" element). The corresponding images are also selected in this tab.
WEBDEV - Server code

Buttons with fixed image or with rollover effect

The image of the control can be defined in the "Details" tab of the description window of control:In the "Style" tab of the description window of control, you have the ability to define the image of control:
  • image: this image will be used to represent the button.
  • rollover image: 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.
For the buttons with fixed image or with rollover effect, the 3-image mode can be used for the image of the border. In this case, the image is automatically divided into 3 parts and it is adapted in width to the button size.
Note: The "Catalog" 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 "Catalog" button.
  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.
WEBDEV - Server code

Three-state button

WEBDEV allows you to manage the different states of the button (normal, pressed, rollover) via a JAVA applet.
To use this type of button:
  1. Create an image containing the three states of the button. For example:
  2. In the "Details" tab of Button control, select the corresponding image file in the "Image" control.In the "Style" tab of Button control, select the corresponding image file in the "Image" control.
Note: The "Catalog" button allows you to choose a 3-state image among a library of images supplied with WEBDEV. To do so, you must:
  1. Click the "Catalog" button.
  2. Select the "<All>" theme.
  3. Select "Graphic buttons".
  4. Select the requested button.
  5. Validate and specify the characteristics of the image to generate. The image is automatically copied into your project and assigned to the button.
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" 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 "Catalog" button.
        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 "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.
Note: 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-image mode 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" 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 "Catalog" button.
        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 "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.
Note: 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-image mode 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" 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 "Catalog" button.
        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 "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.
Note: 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-image mode 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 the multilingual images:
  1. Display the description of Button control.
  2. Click found beside the image path. 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.
  3. For each language, click the [...] button and select the image corresponding to the language. At run time, the corresponding button image will be displayed according to the language chosen by Nation.
  4. Validate. The "Multilingual value" caption appears in the image name.
To manage the 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