ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Developing an application or website / Controls, windows and pages / Controls: Available types / Clickable Image control
  • Overview of the Clickable Image control
  • Page control
  • Creating a Clickable Image control
  • Multilingual site
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
Warning
From version 24, the Image and Clickable Image controls have been merged. For more details, see Image control.
Overview of the Clickable Image control

Page control

The Clickable Image control can be used to:
  • Create a clickable image in a page: in this case, a server click code is associated with the image.
  • Get the coordinates of the click in a page. In this case, the coordinates are returned to the server when the image is clicked.
  • Define clickable areas/map areas. An action can be associated with the image and with each area of the image.
Creating a Clickable Image control
To create a Clickable Image control:
  1. On the "Creation" tab, in the "Usual controls" group, expand "Image" and click "Clickable Image".
  2. Click where you want to create the control in the page. The control appears in the editor.
To view the control characteristics, select "Description" in the context menu of the control. The main information is as follows:
  • The [...] button found in the "General" tab is used to select the image associated with the Image control. Depending on the selected image, a wizard is displayed, allowing you to:
    • compress the image automatically (for images whose size exceeds 20 KB). This option also allows you to convert the image into one of the formats suited to Internet pages. When this option is not selected:
      - If the image uses a format not adapted to Internet pages, the image will be converted each time the page is generated, so this generation may be slowed down.
      - If the image uses a format adapted to the pages but its size is too large, the page load time may increase.
      If you perform the conversion immediately, you can select the image format and quality. You can also use the progressive JPEG format. This format displays an image progressively while the browser loads the page.
    • automatically convert the image into one of the formats suited to Internet pages. If this option is not selected, the image will be converted each time the page is generated, so this generation may be slowed down. If you perform the conversion immediately, you can select the image format and quality.
    • define the image location: you can copy the image to the site directory (_WEB directory) to optimize the page generation time or leave the image at its location (recommended when the file is shared between several contributors).
  • Choosing the type of image ("General" tab): For more details on the type of image (static, dynamic, etc), see Choosing the type of image.
    Linux Dynamic images are not supported.
  • Protection of images ("Details" tab): If this option is checked, the context menu of the image will not be displayed in the browser. Some of the actions related to the image (save, print, etc.) will not be available. This option is also available in Image controls and Thumbnail controls.
  • Display mode ("General" tab): For more information on the image display mode and transparency, see Choosing the image display mode.
  • Transition ("General" tab): When the value of the Image control is modified, a transition can be selected (e.g., Fade, Cover, Slide, etc.) to make the image transition smoother. For more details, see Animating an image.
  • Automatic scroll ("General" tab): This option is available for "dynamic" images or images "from a database: path". For more details, see Image with automatic scroll.
  • You also have the ability to associate an action with the image ("General" tab). For more details, see Choosing the action associated with a control.
Multilingual site
If your site is multilingual, a different image can be selected for each language. This option is useful for images with text, for example.
To manage multilingual images:
  1. Open the description of the Clickable Image control.
  2. Click the icon and select "Multilingual". The multilingual image management window opens. By default, the same file is associated with all the languages supported by the page.
  3. For each language, click the [...] button and select the image corresponding to the language. At runtime, the corresponding image will be displayed according to the language selected by Nation.
    Caution: Only the image files are managed by the multilingual feature, not the display characteristics of image.
Remark: If a multilingual image was defined, the following message is displayed in the image description:
Related Examples:
The MapArea control Unit examples (WEBDEV): The MapArea control
[ + ] Using the MapArea control to display specific click areas in an image.
Minimum version required
  • Version 9
Comments
Click [Add] to post a comment

Last update: 07/05/2023

Send a report | Local help