Boutons image

Un bouton image est un bouton pouvant prendre plusieurs états — par comparaison, un bouton standard accepte trois états : actif, désactivé et enfoncé (cliqué). Comme son nom l’indique, un bouton image fait apparaître chaque état en affichant une image.

Les boutons image peuvent être utilisés de deux manières :

• comme boutons de commande dans un formulaire ; dans ce cas, le bouton image accepte généralement quatre états : actif, désactivé, enfoncé et survolé. Ce mode de fonctionnement est utilisé par l’assistant de création de formulaires pour la plupart des modèles de formulaires. 
• comme bouton permettant à l’utilisateur de choisir entre plusieurs options. Dans ce cas, le bouton image peut être utilisé à la place d’un pop-up menu image. Avec les Pop-up menus image, tous les choix sont présentés simultanément (en tant que commandes du pop-up menu) ; avec un bouton image, les choix sont présentés consécutivement (à mesure que l’utilisateur clique sur le bouton).
  Voici un exemple d’utilisation : vous souhaitez permettre aux utilisateurs de votre application de choisir la langue qui sera utilisée dans les menus, les boîtes de dialogue, etc. Vous pouvez implémenter cette option à l’aide d’un bouton image, placé dans une boîte de dialogue personnalisée de Propriétés :
  Chaque clic modifie l'état du bouton
  Un bouton image est créé de la manière suivante : tout d’abord, vous préparez une image, dans laquelle la série d’images est organisée en colonnes, en lignes, ou les deux. Vous pouvez placer cette image dans la Bibliothèque d'images, une variable image ou un fichier image.
  
  Vous pouvez organiser les images sous la forme de colonnes, de lignes ou de tableaux. Dans ce dernier cas, les images sont alors numérotées de gauche à droite, ligne par ligne, en débutant par 0. Par exemple, la deuxième image de la deuxième ligne d’un tableau de 2 lignes et de 3 colonnes a pour numéro 4. L’étape suivante consiste à ajouter le bouton image dans le formulaire.
  Note : La Bibliothèque d'images comporte des outils d’aide au découpage de l’image en tableau d’imagettes. Lorsqu’une image a été prédéfinie en tant que tableau d’imagettes, vous pouvez créer directement un bouton image dans l’éditeur de formulaires en faisant glisser le nom de l’image depuis la bibliothèque.

Les propriétés spécifiques des boutons images sont les suivantes :

• Dans le thème “Image”, définissez, à l’aide de la liste déroulante “Source”, la provenance de l’image. Vous disposez des options Variable, Bibliothèque d’images, Fichier de ressources et Fichier. Une fois la provenance de l’image définie, saisissez dans la zone “Nom/N°” le nom (si l’image est une variable) ou le numéro (si l’image provient de la bibliothèque d’images ou d’un fichier de ressources) ou le chemin d’accès de l’image (si l’image provient d’un fichier image) ; dans ce dernier cas, le chemin d’accès doit être relatif au dossier Resources de la base (cf. paragraphe Référencement automatique des fichiers images).
• Dans le thème “Découpage”, vous définissez le nombre de lignes et de colonnes composant le tableau d’imagettes. Notre exemple utilise une image comportant trois colonnes et deux lignes.
• Dans le thème “Animation”, vous configurez le mode d’affichage et de fonctionnement du bouton image. Vous pouvez combiner plusieurs options. Ce point est décrit dans le paragraphe suivant.
  Note : La variable associée à un bouton image retourne le numéro d’indice, dans le tableau d’imagettes, de l’image actuellement affichée. La numérotation des images dans le tableau débute à 0.

Voici les différentes options d’affichage et de fonctionnement des boutons image, accessibles dans la zone "Animation" de la Liste des propriétés. Ces options peuvent être combinées :

• <Aucune option cochée>
  Affiche l’image suivante de la série lorsque l’utilisateur clique sur le bouton. Affiche l’image précédente de la série lorsque l’utilisateur effectue Majuscule+clic sur le bouton. La séquence d’images s’arrête lorsqu’on atteint la dernière image de la série. En d’autres termes, le bouton ne retourne pas à la première image de la série.
• Défilement continu sur clic
  Similaire au précédent, à la différence près que lorsque l’utilisateur clique sur l’image et maintient le bouton de la souris enfoncé, l’enchaînement des images est continu (c’est-à-dire que la série défile comme une animation). La séquence d’images s’arrête lorsqu’on atteint la dernière image de la série.   
• Recommencer la séquence
  Similaire au précédent, à la différence près que l’enchaînement des valeurs est continu et le défilement des images est “rebouclé” lorsqu’on atteint la dernière image de la séquence du défilement : une fois la dernière image atteinte, la première image est de nouveau affichée et la séquence recommence.
• Bascule sur passage du curseur
  Le contenu du bouton image est modifié lorsque le curseur de la souris passe au-dessus de lui, sans que l’utilisateur ne clique. L’image initiale est rétablie lorsque le curseur quitte la zone du bouton. Ce mode, aussi appelé “Roll over”, est fréquemment utilisé dans les navigateurs Web et dans les applications multimedia. L’image affichée est la dernière du tableau d’imagettes, sauf si l’option “Dernière imagette si désactivé” est également sélectionnée — dans ce cas, c’est l’avant-dernière imagette qui est utilisée comme “bascule”.
• Retour sur relâchement du clic
  Ce mode fonctionne avec deux images ; il indique que le bouton doit toujours afficher la première image, sauf quand l’utilisateur clique dessus. En d’autres termes, le bouton affiche l’image A par défaut, l’image B lorsqu’il reçoit un clic souris, et de nouveau l’image A dès que le bouton de la souris est relâché. Ce mode permet de réaliser un bouton d’action avec une image différente pour chaque état (normal et enfoncé). Vous pouvez ainsi créer un effet 3D personnalisé ou toute image symbolisant l’action effectuée par bouton.
• Dernière imagette si désactivé
  Permet d’indiquer que la dernière image de la série doit être utilisée lorsque le bouton est inactivé. Avec ce paramétrage, 4D affiche la dernière “partie” de l’image référencée lorsque le bouton image est inactivé. L’image d’inactivation est traitée à part par 4D : lorsque vous combinez cette option avec les options “Défilement continu sur clic” et “Recommencer la séquence”, la dernière image est exclue de la séquence associée au bouton et n’apparaîtra que lorsqu’il sera inactivé.
• Défilement tous les N ticks
  Permet de faire défiler en boucle le contenu du bouton image à la vitesse spécifiée (en ticks). Par exemple, si vous passez 10, la variation du bouton image s’effectuera tous les 10 ticks. Dans ce mode, toutes les autres options sont ignorées.

Note : L’option Transparent (thème “Apparence”) permet de paramétrer le rendu du bouton image (rend transparent le fond de l’image).

Par exemple, vous souhaitez définir un bouton image acceptant les modes “Retour sur relâchement du clic”, “Bascule sur passage du curseur” et “Dernière imagette si désactivé”. Vous disposez d’un tableau d’imagettes contenant une ligne et 4 colonnes. Chaque imagette correspond, dans l’ordre, aux états suivants : “actif par défaut”, “bouton cliqué”, “survol du curseur” et “inactivé”. Dans la Liste des propriétés, vous lui affectez les propriétés suivantes : 1 ligne, 4 colonnes, option Bascule sur passage du curseur, Retour sur relâchement du clic et Dernière imagette si désactivé.