DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Aide / Développer une application ou un site / Champs, fenêtres et pages / Champs : Types disponibles / Champ Image
  • Présentation
  • Champ d'une page
  • Déplacement d'une image (ou de tout type de champ)
  • Effet d'apparition d'une image par clipping ou fondu
  • Effet mouvement automatique d'image
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaEtats et RequêtesCode Utilisateur (MCU)
WEBDEV
WindowsLinuxPHPWEBDEV - Code Navigateur
WINDEV Mobile
AndroidWidget AndroidiPhone/iPadWidget IOSApple WatchMac CatalystUniversal Windows 10 App
Autres
Procédures stockées
Présentation

Champ d'une page

Les sites Web proposent de plus en plus d'effets de transition entre les éléments :
  • images se chargeant progressivement dans la page.
  • déplacement d'images.
  • effet d'apparition d'image par recouvrement.
Il est également possible de réaliser un effet "Mouvement automatique d'image". Cet effet simule le déplacement léger d'une caméra sur une image sans rien programmer.
WEBDEV permet d'intégrer ces solutions facilement dans vos sites Web.
Déplacement d'une image (ou de tout type de champ)
WEBDEV permet de donner très simplement un effet graphique lors du déplacement d'un champ. Il suffit pour cela d'utiliser la fonction AnimationJoueSurPropriétéChamp. Cette fonction, utilisée en code navigateur, permet de définir l'animation utilisée lors de la modification d'une propriété d'un champ.
Ainsi, pour déplacer un champ, il suffit d'utiliser les propriétés X et Y du champ. Par exemple :
AnimationJoueSurPropriétéChamp(IMG_Image1, "X" ,0, 200, 50000, animDécélération)
AnimationJoueSurPropriétéChamp(IMG_Image1, "Y", 0, 200, 50000, animDécélération)
Il est également possible d'utiliser cette fonction avec d'autres propriétés pour créer des effets spéciaux : Largeur, Hauteur, Couleur, CouleurFond, Opacité, ...
Effet d'apparition d'une image par clipping ou fondu
WEBDEV permet de donner très simplement un effet d'apparition sur une image. Cette image peut être présente dans :
  • un champ Image,
  • un champ Vignette.
La méthode à utiliser est la suivante :
  1. Affichez l'onglet "UI" de la description du champ (champ Image ou champ Vignette).
  2. Dans le champ "Transition", sélectionnez le mode de transition voulu : balayage, recouvrement, découvrement, ...
    Le mode de transition "Aléatoire" permet d'enchaîner aléatoirement les modes de transition sur un même champ.
  3. Par programmation, changez l'image associée au champ. Par exemple, en code navigateur :
    IMG_Image1.Valeur = "images\hotel\alize.jpg"
  4. En exécution, la nouvelle image remplace l'image présente dans le champ avec l'effet voulu.
Effet mouvement automatique d'image
WEBDEV permet de donner très simplement un effet de mouvement automatique sur une image.
La méthode à utiliser est la suivante :
  1. Affichez l'onglet "UI" de la description du champ (champ Image ou champ Vignette).
  2. Dans le champ "Transition", sélectionnez le mode de transition "Mouvement panoramique".
  3. En exécution, l'image bouge toute seule sans aucune programmation.
Cet effet simule le déplacement léger d'une caméra sur une image. Trois effets sont combinés :
  • balayage dans des directions aléatoires,
  • zoom léger,
  • fondu pour l'enchaînement des effets.
Pour utiliser cet effet sur un ensemble d'images, il est nécessaire de combiner cette option avec le défilement automatique d'images.
  1. Affichez l'onglet "UI" de la description du champ (champ Image ou champ Vignette).
  2. Dans la zone "Transitions", pour le champ "Transition", sélectionnez le mode de transition "Mouvement panoramique".
  3. Dans la zone "Défilement automatique", cochez l'option "Faire défiler les images d'un répertoire ou d'une liste programmée". Selon le résultat voulu, cochez également les options "Démarrer automatiquement", "Parcourir le répertoire de l'image (Onglet Général)", "Trier le contenu du défilement".
    Pour plus de détails, consultez défilement automatique d'images.
  4. Validez.
Attention : Le mouvement de l'image est optimisé pour les navigateurs supportant HTML 5 (Chrome, Firefox, ...). Dans le cas contraire, le déplacement peut être légèrement saccadé.
Version minimum requise
  • Version 15
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 25/05/2022

Signaler une erreur ou faire une suggestion | Aide en ligne locale