ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Developing an application or website / Controls, windows and pages / Controls: Available types / Image control
  • Overview
  • Page control
  • Moving an image (or any type of control)
  • Appearance effect of an image by clipping or fade-in
  • Effect of automatic image movement
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
Overview

Page control

The Web sites propose several transition effects between the elements:
  • images progressively loaded in the page.
  • moving images.
  • image appearing with overlapping effects.
You also have the ability to perform an "Automatic image movement" effect. This effect simulates the light move of a camera over an image without programming.
WEBDEV allows you to easily include these solutions in your Web sites.
Moving an image (or any type of control)
WEBDEV allows you to easily give a graphic effect when moving a control. To do so, use the AnimationPlayOnControlProperty function. This function, used in browser code, allows you to define the animation that will be performed when modifying a control property.
Therefore, to move a control, all you have to do is use the X and Y properties of the control. For example:
AnimationPlayOnControlProperty(IMG_Image1, "X", 0, 200, 50000, animDécélération)
AnimationPlayOnControlProperty(IMG_Image1, "Y", 0, 200, 50000, animDécélération)
You also have the ability to use this function with other properties to create special effects: Width, Height, Color, BackgroundColor, Opacity, ...
Appearance effect of an image by clipping or fade-in
WEBDEV allows you to easily give an appearance effect to an image. This image can be found in:
  • an Image control,
  • a Thumbnail control.
The following method must be used:
  1. Go to the "UI" tab of the control description (Image or Thumbnail control).
  2. In "Transition", select the desired transition mode: swipe, overlay, underlay, ...
    The "Random" transition mode allows you to use several transition modes on the same control.
  3. Through programming, change the image associated with the control. For example, in browser code:
    IMG_Image1.Value = "images\hotel\tradewinds.jpg"
  4. At runtime, the new image replaces the image found in the control with the requested effect.
Effect of automatic image movement
WEBDEV allows you to easily give an effect of "automatic movement on an image".
The following method must be used:
  1. Go to the "UI" tab of the control description (Image or Thumbnail control).
  2. In "Transition", select "Panoramic movement".
  3. At runtime, the image moves without any programming.
This effect simulates the light move of a camera over an image. Three effects are combined:
  • swipe in random directions,
  • light zoom,
  • fade-in for the sequence of effects.
To use this effect on a set of images, this option must be combined with the automatic scroll of images.
  1. Go to the "UI" tab of the control description (Image or Thumbnail control).
  2. In the "Transitions" section, expand "Transition" and select "Panoramic movement".
  3. In the "Automatic scroll" section, check "Scroll images found in a directory or programmed list". Depending on the desired result, you can also check "Start automatically", "Browse image directory (General tab)" or "Sort the content of the scroll".
    For more details, see automatic scroll of images.
  4. Validate.
Caution: The image movement is optimized for the browsers that support the HTML 5 standard (Chrome, Firefox, ...). Otherwise, the movement may not look smooth.
Minimum version required
  • Version 15
Comments
Click [Add] to post a comment

Last update: 05/26/2022

Send a report | Local help