PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

  • Présentation
  • Images associées à un bouton dans une fenêtre
  • 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 WatchCatalystUniversal Windows 10 AppWindows Mobile
Autres
Procédures stockées
Images et boutons
Présentation
Pour optimiser le look de vos écrans ou de vos sites, il est possible d'utiliser des images dans vos boutons.
Images associées à un bouton dans une fenêtre
Images associées à un bouton dans une page
Versions 19 et supérieures
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).
Nouveauté 19
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 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).
Versions 19 et supérieures
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.
Nouveauté 19
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 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.
Versions 19 et supérieures
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.
Nouveauté 19
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.
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ée à côté du chemin de l'image.
  3. Sélectionnez l'option "Multi-langues".
  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 multi-langue" 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