DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE
Aide / Développer une application ou un site / Champs, fenêtres et pages / Champs : Types disponibles / Champ Bouton
  • Présentation
  • Images associées à un bouton dans une page
  • Image d'un bouton et style CSS
  • Image d'un bouton et options spécifiques
  • Configuration avancée des images
  • Image de bouton multilingue
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
Images et boutons
Présentation
Pour optimiser le look de vos écrans ou de vos sites, WINDEV, WEBDEV et WINDEV Mobile offrent de nombreuses possibilités.
WEBDEV - Code Serveur Dans une page, l'utilisation d'une image dans le champ peut être liée au style CSS. Il est également possible d'utiliser plusieurs types d'images pour le champ.
La plupart de ces options sont définies dans les onglets "Général" et "Style" de la fenêtre de description du champ.
Images associées à un bouton dans une page
WEBDEV - Code Serveur Dans une page, il est possible de définir les images associées à un bouton dans le style du bouton :
  • soit via le style CSS (élément "Bouton CSS" de l'onglet "Style" de la description du champ).
  • soit via les options d'images (élément "Bouton (Images)" de l'onglet "Style" de la description du champ).
WEBDEV - Code Serveur

Image d'un bouton et style CSS

Pour définir l'image associée au bouton via le style CSS :
  1. Affichez l'onglet "Style" de la fenêtre de description du champ.
  2. Sélectionnez l'élément "Bouton (CSS)".
  3. Affichez les options avancées (lien "Plus d'options").
  4. Dans l'onglet "Fond", il est possible de définir l'image utilisée et ses caractéristiques.
WEBDEV - Code Serveur

Image d'un bouton et options spécifiques

Pour définir l'image associée au bouton via les options WEBDEV :
  1. Affichez l'onglet "Style" de la fenêtre de description du champ.
  2. Sélectionnez l'élément "Bouton (Images)".
  3. Deux types d'images peuvent être utilisées :
    • Une planche d'images.
      Cette planche d'images contient :
      • horizontalement : les différents états du bouton : repos, enfoncé, grisé, sélectionné, survolé.
      • verticalement : les différents états pour l'animation du bouton (5 ou 6 étapes conseillées).
    • Des images indépendantes. Dans ce cas, seules l'image de l'état normal et l'image de l'état survolé sont gérées.
      • Normal : cette image sera utilisée pour représenter le bouton.
      • Survol : cette image sera affichée lorsque l'internaute survolera le bouton avec le curseur de la souris. Si cette image n'est pas spécifiée, aucun effet de survol ne sera observé.
      • L'option "Catalogue" du bouton Bouton déroulant permet de choisir directement les deux types d'images parmi une bibliothèque d'images livrée avec WEBDEV. Il suffit de :
        1. Cliquer sur le bouton Bouton déroulant et sélectionner l'option "Catalogue".
        2. Sélectionner le thème "<Tout>".
        3. Sélectionner l'option "Boutons graphiques".
        4. Sélectionner le bouton voulu.
        5. Valider puis donner les caractéristiques de l'image à générer et valider. Les deux images sont automatiquement copiées dans votre projet et affectées au bouton.
      • L'option "Fusionner les images dans une planche" permet d'éviter le clignotement lors du changement d'image au survol.
Remarque : L'option "Etirement" permet de gérer l'étirement des images associées au bouton lors de la modification de la taille du bouton sous l'éditeur. Il est possible :
  • soit d'étirer l'image en largeur,
  • soit d'étirer l'image en largeur et hauteur,
  • soit d'utiliser le mode 9 images pour configurer l'étirement.
Configuration avancée des images

Image de bouton multilingue

Si votre site ou votre application est multilingue, il est possible de sélectionner une image de bouton différente pour chaque langue. Cette option est intéressante par exemple lorsque les images associées au bouton contiennent le libellé du bouton.
Pour gérer des images multilingues :
  1. Affichez la description du champ Bouton.
  2. Cliquez sur le bouton Bouton déroulant situé à côté du chemin de l'image.
  3. Sélectionnez l'option "Multilingue".
  4. La fenêtre de gestion des images multilingues apparaît. Par défaut, le même fichier est associé à toutes les langues gérées par la fenêtre ou la page.
  5. Pour chaque langue, cliquez sur le bouton Bouton déroulant. Vous pouvez :
    • Sélectionner l'image correspondant à la langue directement sur votre poste (option "Parcourir").
    • Sélectionner l'image correspondant à la langue dans le catalogue d'images (option "Catalogue").
    En exécution, en fonction de la langue choisie par la fonction Nation, l'image de bouton correspondante sera affichée.
  6. Validez. Le libellé "Valeur multilingue" apparaît dans le nom de l'image.
Voir Aussi
Version minimum requise
  • Version 9
Documentation également disponible pour…
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 07/04/2023

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