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
  • Boutons à image fixe ou avec survol
  • Boutons à trois états
  • 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
WEBDEV - Code Serveur Dans une page, deux types de boutons à image peuvent être utilisés :
  • Bouton à image fixe ou avec survol
  • Bouton à 3 états
L'aspect du bouton est sélectionné dans l'onglet "Général" de la description du champ.
Les images correspondantes sont sélectionnées dans l'onglet "Détail" de la fenêtre description du champ.
L'aspect du bouton est sélectionné dans l'onglet "Style" de la fenêtre description du champ (élément "Image du bouton"). Les images correspondantes sont également sélectionnées dans cet onglet.
WEBDEV - Code Serveur

Boutons à image fixe ou avec survol

Dans l'onglet "Détail" de la fenêtre de description du champ, vous pouvez définir l'image du champ :Dans l'onglet "Style" de la fenêtre de description du champ, vous pouvez définir l'image du champ :
  • image : cette image sera utilisée pour représenter le bouton.
  • image 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é.
Pour les boutons à image fixe ou avec survol, il est possible d'utiliser le mode 3 images pour l'image du cadre. Dans ce cas, l'image est automatiquement divisée en 3 parties et s'adapte en largeur à la taille du bouton.
Remarque : Le bouton "Catalogue" 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 "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.
WEBDEV - Code Serveur

Boutons à trois états

WEBDEV permet de gérer différents états du bouton (normal, enfoncé, survolé) grâce à une applet JAVA.
Pour utiliser ce type de bouton :
  1. Créez une image contenant les trois états du bouton. Par exemple :
  2. Dans l'onglet "Détail" du champ Bouton, sélectionnez le fichier image correspondant dans le champ "Image".Dans l'onglet "Style" du champ Bouton, sélectionnez le fichier image correspondant dans le champ "Image".
Remarque : Le bouton "Catalogue" permet de choisir directement une image à 3 états parmi une bibliothèque d'images livrée avec WEBDEV. Il suffit de :
  1. Cliquer sur le bouton "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. L'image est automatiquement copiée dans votre projet et affectée au bouton.
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é.
      • Le bouton "Catalogue" 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 "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 "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é.
      • Le bouton "Catalogue" 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 "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 "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é.
      • Le bouton "Catalogue" 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 "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 "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 l'icône située à côté du chemin de l'image. 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.
  3. Pour chaque langue, cliquez sur le bouton [...] et sélectionnez l'image correspondant à la langue. En exécution, en fonction de la langue choisie par la fonction Nation, l'image de bouton correspondante sera affichée.
  4. Validez. Le libellé "Valeur multi-langue" apparaît dans le nom de l'image.
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