|
|
|
|
- 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
Définir des zones graphiques de cliquage
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) : - 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).
- 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é.
- 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.
- 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. - 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 : - Maintenez la touche Ctrl enfoncée.
- 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).
- Relâchez la touche Ctrl.
Associer une action à une zone graphique Pour associer une action à une zone graphique : - Sélectionnez la zone graphique.
- Dans le menu contextuel de la zone graphique, sélectionnez l'option "Action de la zone".
- 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, ...
- 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 :
|
Exemples unitaires (WEBDEV) : Le champ MapArea
[ + ] Utilisation du champ MapArea pour définir des zones de clic précises dans une image.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|