PC SOFT

WINDEVWEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
  • Overview of 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/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Others
Stored procedures
Warning
From version 24, the Image and Clickable Image controls have been merged. See Image control for more details.
Overview of 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" pane, 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 control popup menu. 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 popup 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.
  • Versions 15 and later
    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. See Animating an image for more details.
    New in version 15
    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. See Animating an image for more details.
    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. See Animating an image for more details.
  • Versions 16 and later
    Automatic scroll ("General" tab): This option is available for "dynamic" images or images "from a database: path". See Image with automatic scroll for more details.
    New in version 16
    Automatic scroll ("General" tab): This option is available for "dynamic" images or images "from a database: path". See Image with automatic scroll for more details.
    Automatic scroll ("General" tab): This option is available for "dynamic" images or images "from a database: path". See Image with automatic scroll for more details.
  • You also have the ability to associate an action with the image ("General" tab). See Choosing the action associated with a control for more details.
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 window for managing multilingual images is displayed. 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