Images et boutons

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE

Version :

Accueil | Connexion | Français

Aide / Développer une application ou un site / Champs, fenêtres et pages / Champs : Types disponibles / Champ Bouton

Présentation
Images associées à un champ Bouton dans une fenêtre
Présentation
Cas particulier : des images pour gérer les états du champ Bouton
Animations dans le champ Bouton
Positionnement de l'image et du texte
Personnalisez la forme du champ Bouton grâce au style
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
Configuration du mode d'affichage (bouton dans une fenêtre)
Image de bouton multilingue

WINDEV

WEBDEV

WINDEV Mobile

Autres

Voir Aussi

Le champ Bouton

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.

Dans une fenêtre, il est possible de :

utiliser des images dans les champs Bouton. Ces images peuvent :
- définir les différents états du champ.
- être animées.
- être positionnées par rapport au texte affiché dans le champ.
- permettre de définir la forme du champ.
Définir des ombres sur les cadres des champs Bouton.

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 champ Bouton dans une fenêtre

Présentation

Dans une fenêtre, deux types d'images peuvent être utilisés pour définir l'image associée à un champ Bouton :

image : cette image sera superposée au bouton quelle que soit sa forme.
Exemple : Champ Bouton avec une image et sans cadre :
Conseil : Pour de meilleurs résultats, l'image doit être inférieure de 5 pixels à la taille du champ Bouton (en largeur et en hauteur).
image du cadre du bouton : cette image permet de re-définir simplement la forme du bouton. Par exemple :

Ces images sont sélectionnées dans la fenêtre de description du champ (onglet "Général") :

Remarques :

La bibliothèque l'images livrée avec WINDEV ou WINDEV Mobile permet de choisir les images (cadre et image) associées au champ. Pour ouvrir cette bibliothèque, déroulez le bouton et sélectionnez l'option "Catalogue".
Pour éditer les options de l'image (mode d'affichage, symétrie, ...), déroulez le bouton et sélectionnez l'option "Options d'affichage, transparence, symétrie" (voir Configuration du mode d'affichage (bouton dans une fenêtre)).
Seule l'image du cadre du bouton peut être paramétrée.

Cas particulier : des images pour gérer les états du champ Bouton

WINDEV et WINDEV Mobile permettent de gérer différents états du bouton : normal, enfoncé, grisé, en cours et survol. Pour plus de détails, consultez Les états d'un champ Bouton.

Si les états du champ Bouton sont gérés par des images, vous pouvez :

soit utiliser deux images (l'image affichée dans le champ et l'image du cadre) comportant chacune 5 états. Cette solution permet de superposer l'image affichée sur l'image du cadre et de réutiliser l'image du cadre (par exemple pour un autre champ Bouton).
soit incorporer l'image affichée dans le champ directement dans l'image du cadre. Seule l'image correspondant au cadre sera indiquée dans la description du champ (option "Image").

Bouton au repos, enfoncé, grisé, sélectionné, survolé

Si l'image du cadre (et/ou l'image affichée par le bouton) contient plusieurs états, WINDEV permet de gérer :

l'agrandissement (étirement) de l'image (par exemple si la taille du champ Bouton est supérieure à l'image fournie). Il existe plusieurs possibilités :
- Pas d'étirement.
- Etirement en largeur (3 images). La règle de découpage est la suivante :
  - l'image est découpée en trois parties
  - la partie 1 correspond à la zone de gauche
  - la partie 3 correspond à la zone de droite
  - la partie 2 correspond à la zone du milieu. La taille de cette partie est égale à 16 pixels. Cette partie sera répétée autant de fois que nécessaire pour que l'image du bouton soit à la taille voulue.
- Etirement en largeur et en hauteur.
- Etirement personnalisé grâce au mode 9 images.
un halo autour du champ Bouton.
Pour éviter les problèmes d'affichage lorsque plusieurs boutons sont mis côte à côte, il est nécessaire de définir la taille du halo en pixels (largeur et hauteur).

Animations dans le champ Bouton

Il est également possible d'animer les images des champ Bouton. Pour cela, le champ Bouton peut :

utiliser une image animée par défaut. Dans ce cas, l'image affichée par le champ correspond à une image ayant un format d'image animée (Gif animé par exemple). La gestion de l'animation est automatique.
utiliser une image qui sera animée par WINDEV ou WINDEV Mobile. Dans ce cas, l'image affichée par le champ contient tous les dessins de l'animation en planche (les dessins horizontaux représentent les états du bouton). Le nombre d'étapes de l'animation doit être spécifié dans l'onglet "Général" de la fenêtre de description du champ Bouton.

Positionnement de l'image et du texte

Lorsqu'une image contient un libellé et un picto (une image), il est possible de paramétrer la position relative de l'image et du texte dans le style du champ :

Affichez la fenêtre de description du champ Bouton (option "Description" du menu contextuel).
Affichez l'onglet "Style".
Sélectionnez l'élément "Libellé" et paramétrez la position du libellé grâce à l'option "Position".

L'option "Positionnement Libre" permet de gérer entièrement la position de l'image et du libellé. La flèche à côté de l'option permet d'accéder à la fenêtre de configuration :

La zone rouge correspond à la zone du libellé et la zone bleue correspond à la zone de l'image. Il est possible de :

Configurer un des états ou tous les états du bouton.
Spécifier exactement la position de l'image et celle du libellé (au pixel près).
Spécifier un ancrage différent pour l'image et le libellé.

Remarques :

Le positionnement libre peut être manipulé uniquement si le bouton utilise un picto spécifique. Si le picto est intégré dans l'image de fond, le positionnement libre n'est pas possible.
A partir du moment où le positionnement libre a été défini pour un bouton, l'option "Editer la position du libellé et du picto" (menu contextuel du bouton) permet d'afficher la fenêtre de configuration du positionnement.
Les boutons fléchés proposent différentes options permettant de manipuler simplement l'image ou le libellé : Caler en haut, Caler en bas, Centrer, ...

Personnalisez la forme du champ Bouton grâce au style

Il est possible de paramétrer la forme du champ Bouton grâce aux options de style.

Pour paramétrer la forme du champ Bouton :

Affichez l'onglet "Style" de la fenêtre de description du champ.
Sélectionnez l'élément "Cadre extérieur".
Dans la zone "Cadre", sélectionnez le cadre voulu.
- Utilisez le bouton pour configurer le cadre (les options de configuration sont différentes selon le type de cadre choisi).
- Utilisez l'icône (à droite de l'option "Cadre") permet de configurer l'ombre du cadre du champ. Lorsque l'ombre est activée, il est possible de choisir :
  - le décalage en X et Y de l'ombre,
  - le pourcentage d'opacité,
  - le rayon de flou,
  - la couleur de l'ombre.
    Remarque : Il n'est pas possible de définir une ombre sur les champs Bouton utilisant le thème XP.
Validez.

Remarques :

Certaines options ne sont pas visibles si le bouton possède une image de cadre/fond.
Il est possible de choisir un cadre spécifique par état du champ Bouton : repos, survol, enfoncé, focus, grisé.
Le cadre "Rond" permet d'obtenir un bouton rond. Dans ce cas :
- la transparence est gérée automatiquement.
- Le clic est adapté à la forme : si l'utilisateur clique dans un coin du champ, en dehors du rond, le clic n'est pas pris en compte.
L'option "Personnalisé" permet de paramétrer entièrement le cadre utilisé via l'icône :

Images associées à un bouton dans une page

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).

Image d'un bouton et style CSS

Pour définir l'image associée au bouton via le style CSS :

Affichez l'onglet "Style" de la fenêtre de description du champ.
Sélectionnez l'élément "Bouton (CSS)".
Affichez les options avancées (lien "Plus d'options").
Dans l'onglet "Fond", il est possible de définir l'image utilisée et ses caractéristiques.

Image d'un bouton et options spécifiques

Pour définir l'image associée au bouton via les options WEBDEV :

Affichez l'onglet "Style" de la fenêtre de description du champ.
Sélectionnez l'élément "Bouton (Images)".
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 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 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

Configuration du mode d'affichage (bouton dans une fenêtre)

Lors de la description des images utilisées pour un bouton, il est possible de configurer le mode d'affichage des images :

Cliquez sur le bouton .
Dans le menu qui s'affiche, sélectionnez l'option "Options d'affichage, transparence, symétrie".
Dans la fenêtre qui s'affiche, vous pouvez configurer :
- le mode d'affichage de l'image
- sa rotation
- sa transparence
- sa symétrie.

Remarque : Si l'image est multilingue, cette configuration s'applique à toutes les langues.

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 :

Affichez la description du champ Bouton.
Cliquez sur le bouton situé à côté du chemin de l'image.
Sélectionnez l'option "Multilingue".
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.
Pour chaque langue, cliquez sur le bouton . 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.
Validez. Le libellé "Valeur multilingue" apparaît dans le nom de l'image.

Voir Aussi

Le champ Bouton

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