PC SOFT

ONLINE HELP
FOR WINDEV, WEBDEV AND WINDEV MOBILE

Home | Sign in | English US
  • 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
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
  • Find out the coordinates of the mouse click in a page. In this case, the coordinates are returned to the server when the image is clicked.
  • Define click areas/map areas. An action can be associated with the image and with each section of the image.
Creating a Clickable Image control
To create a Clickable Image control:
  1. In the page editor, click (or select "Insert .. Control .. Clickable image").On the "Creation" pane, in the "Usual controls" group, expand "Image" and click "Clickable image".On the "Creation" pane, in the "Usual controls" group, expand "Image" and click "Clickable image".
  2. Click the position where the control must be created in the page. The control appears in creation mode.
To display the characteristics of the control, select "Description" from the popup 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 the images whose size exceeds 20 KB). This option also allows you to convert the image into one of the formats adapted to the Internet pages. If this option is not selected:
      - If the image is using a format not adapted to the Internet pages, the image will be converted whenever the page is generated, so this generation may be slowed down.
      - If the image is using a format adapted to the pages but if its size is too large, the time for displaying the page may be slowed down.
      If you choose to perform the conversion immediately, you have the ability to select the format of the image and its quality. You also have the ability to 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 for the Internet pages. If this option is not selected, the image will be converted whenever the page is generated, so this generation may be slowed down. If you choose to perform the conversion immediately, you have the ability to select the format of the image and its quality.
    • define the location of the image: the image can be copied into the site directory (_WEB directory) so the time for generating the page is optimized or the image can remain in its location (recommended when the file is shared among several contributors).
  • Choosing the type of image ("General" tab): See Choosing the type of image for more details.
    Linux The 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 image operations available at browser level (backup, print, ...) will not be performed. This option is also available for the Image controls and for the Thumbnail controls.
  • Display mode ("General" tab): See Choosing the display mode of the image for more details.
  • Versions 15 and later
    Transition ("General" tab): When the value of the image control is modified, a transition can be selected such as Faded, Overlap or Swipe to make the change of image more harmonious. 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 such as Faded, Overlap or Swipe to make the change of image more harmonious. See Animating an image for more details.
    Transition ("General" tab): When the value of the image control is modified, a transition can be selected such as Faded, Overlap or Swipe to make the change of image more harmonious. See Animating an image for more details.
  • Versions 16 and later
    Automatic scroll ("General" tab): This option is accessible for the "dynamic" images or for the images "from a database: path". See Image with automatic scroll for more details.
    New in version 16
    Automatic scroll ("General" tab): This option is accessible for the "dynamic" images or for the images "from a database: path". See Image with automatic scroll for more details.
    Automatic scroll ("General" tab): This option is accessible for the "dynamic" images or for the 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 a multilingual site, a different image can be selected for each language. This option is useful when the images contain a text for example.
To manage the multilingual images:
  1. Display the description of the Clickable Image control.
  2. Click . The window for managing the 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 run time, the corresponding image will be displayed according to the language chosen by Nation.
    Caution: Only the image files are managed by the multilingual feature, not the display characteristics of the image.
Note: 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 required version
  • Version 9
Comments
Click [Add] to post a comment