ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Developing an application or website / Controls, windows and pages / Controls: Available types / Button control
  • Overview
  • 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/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Others
Stored procedures
Images and buttons
Overview
WINDEV, WEBDEV and WINDEV Mobile include many features to improve the appearance of applications and sites.
WEBDEV - Server code In a page, you can define images to be used in the control from the CSS style options. You can also use different types of images for the control.
Most of these options can be defined in the "General" and "Style" tabs of the control description window.
Images associated with a button in a page
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

Image of button and CSS style

To define the image associated with the button via the CSS style:
  1. Go to the "Style" tab of the control description window.
  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 specific options

To define the image associated with the button via the WEBDEV options:
  1. Go to the "Style" tab of the control description window.
  2. Select the "Button (Images)" element.
  3. Two types of images can be used:
    • An image set.
      This image set 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 normal state and hovered state images are supported.
      • Normal: this image will be used to represent the button.
      • Hover: this image will be displayed when the button is hovered by the mouse cursor. If this image is not specified, no hover effect will be available.
      • The "Catalog" option of the Drop-down button button allows you to choose the two types of images from a library of images provided with WEBDEV. To do so:
        1. Click the Drop-down button button and select "Catalog".
        2. Select the "<All>" theme.
        3. Select "Graphic buttons".
        4. Select the desired 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 "Merge images in a set" option avoids the blinking effect when the image changes on mouse hover.
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 next to the image path.
  3. Select "Multilingual".
  4. The multilingual image management window opens. 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 runtime, the corresponding button image will be displayed depending on the language selected 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

Last update: 04/07/2023

Send a report | Local help