PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE

  • Présentation
  • Dessiner une zone graphique
  • Dessiner une zone graphique sur une image cliquable
  • 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/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Autres
Procédures stockées
Définir des zones graphiques de clicage
Présentation
Si l'image cliquable utilisée est de type "Zone graphique (Map Area)", il est possible d'inclure des zones de clicages 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 une image cliquable

Pour dessiner une zone graphique sur une image cliquable :
  1. Assurez-vous que l'image cliquable utilise le mode de clicage "Zones graphiques (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).
  3. Selon la forme de la zone à créer, sélectionnez une des options suivantes du menu contextuel :
    • "Insérer une zone graphique .. Un rectangle" : pour définir des zones fixes simples.
    • "Insérer une zone graphique .. Un cercle" : pour définir des zones arrondies.
    • "Insérer une zone graphique .. 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. 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 de l'image de type "Zones graphiques (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 de l'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