DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Aide / Développer une application ou un site / Champs, fenêtres et pages / Champs : Types disponibles / Champ Image clicable
  • Présentation
  • Dessiner une zone graphique
  • Dessiner une zone graphique sur un champ Image (Map Area)
  • Astuces pour une zone graphique de type polygone
  • Associer une action à une zone graphique
  • Gérer l'action associée à une zone graphique (map area) par programmation
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
Définir des zones graphiques de cliquage
Présentation
Dans une page, un champ Image peut être une image contenant des zones de clic. Dans ce cas, dans l'onglet "Général" de la fenêtre de description du champ, la zone "Action lors du clic" correspond à l'option "Zones de clic définies en édition (Map Area)".
Il est alors possible d'inclure des zones de clic sur l'image. Ces zones peuvent avoir des formes différentes : cercle, rectangle, polygone, ...
A chaque zone, comme à l'image dans son ensemble, il est possible d'associer une action spécifique. Lorsque l'internaute cliquera sur une des zones, l'action correspondante sera effectuée.
Dessiner une zone graphique

Dessiner une zone graphique sur un champ Image (Map Area)

Pour dessiner une zone graphique sur un champ Image (Map Area) :
  1. Assurez-vous que le champ Image utilise l'action "Zones de clic définies en édition (Map Area)" (onglet "Général" de la description du champ).
  2. Affichez le menu contextuel de l'image cliquable (clic droit de la souris) et sélectionnez l'option "Editer les zones graphiques". Le champ Image passe en edition : un contour jaune est affiché.
  3. Affichez le menu contextuel du champ Image en édition. Selon la forme de la zone à créer, sélectionnez une des options suivantes du menu contextuel :
    • "Ajouter un rectangle" : pour définir des zones fixes simples.
    • "Ajouter un cercle" : pour définir des zones arrondies.
    • "Ajouter un polygone" : pour définir des zones complexes, comme une carte géographique.
  4. Dans le cas d'un cercle ou d'un rectangle, la zone est automatiquement créée.
    Pour déplacer la zone, cliquez dessus et maintenez le bouton gauche de la souris pendant le déplacement de la zone.
    Pour redimensionner la zone, cliquez dessus et sélectionnez une des poignées noires.
  5. Dans le cas d'un polygone, cliquez à l'emplacement où la zone doit être dessinée. Cliquez ensuite pour définir chaque point du polygone. Pour fermer le polygone, utilisez le clic droit.
Remarque : Chaque zone graphique est identifiée par un numéro. Ce numéro correspond à l'ordre de création des zones. Ce numéro apparaît donc automatiquement dans la zone.

Astuces pour une zone graphique de type polygone

Pour une sélection précise des points de la zone, il est possible de zoomer la page sous l'éditeur de pages. Il suffit de sélectionner le pourcentage de zoom dans la barre de message de WEBDEV.
Pour ajouter des sommets au polygone :
  1. Maintenez la touche Ctrl enfoncée.
  2. Cliquez avec la souris à l'endroit désiré sur le contour de la zone (un signe "+" s'affiche en dessous du curseur de la souris).
  3. Relâchez la touche Ctrl.
Associer une action à une zone graphique
Pour associer une action à une zone graphique :
  1. Sélectionnez la zone graphique.
  2. Dans le menu contextuel de la zone graphique, sélectionnez l'option "Action de la zone".
  3. Dans la fenêtre qui s'affiche, sélectionnez l'action voulue :
    • Exécution d'un lien ou d'un bouton présent dans la page, ...
    • Affichage d'une page, ...
    • Envoi d'un email, ...
  4. Validez.

Gérer l'action associée à une zone graphique (map area) par programmation

Dans le code serveur du champ Image (Map Area), il est possible de gérer l'action à effectuer en fonction de la zone cliquée. Pour cela, il suffit d'utiliser la fonction ImageZone dans le code de clic serveur du champ Image.
Par exemple, le code suivant permet d'afficher une page différente en fonction de la zone cliquée. Les zones sont identifiées par un numéro. Ce numéro correspond à l'ordre de création des zones. Ce numéro apparaît donc automatiquement dans la zone.
Attention : Si une zone est supprimée, le numéro des zones créées après sera modifié (numéro initial - 1).
// -- Code serveur : Clic sur l'image IMG_Clic1
Zone est un entier
// Récupération de la zone cliquée
Zone = ImageZone()
SELON Zone
CAS 1 : PageAffiche(PAGE_Accueil)
CAS 2 : PageAffiche(PAGE_NousConnaitre)
FIN
Liste des exemples associés :
Le champ MapArea Exemples unitaires (WEBDEV) : Le champ MapArea
[ + ] Utilisation du champ MapArea pour définir des zones de clic précises dans une image.
Version minimum requise
  • Version 9
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 31/05/2022

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