ImageMap, contrôle

Le contrôle ImageMap ASP.NET vous permet de créer une image contenant des zones sur lesquelles les utilisateurs peuvent cliquer et qui sont appelées zones réactives. Chacune de ces zones réactives peut être un lien hypertexte distinct ou un événement de publication.

Pour ajouter un contrôle ImageMap à une page

1. Faites glisser le contrôle ImageMap du panneau Boîte à outils sur votre page.

2. Définissez les propriétés qui déterminent l’apparence et le comportement du contrôle ImageMap dans le panneau Propriétés de la balise.

Pour une description complète de toutes les propriétés de contrôle ImageMap , voir Propriétés ImageMap  dans MSDN Library.

Éléments ImageMap

Le contrôle ImageMap se compose principalement de deux éléments. Le premier est une image, qui peut être un graphique dans n’importe quel format graphique Web standard, tel qu’un fichier .gif, .jpg ou .png.

Le deuxième est une collection de contrôles de zone réactive. Chaque contrôle de zone réactive est un élément différent. Pour chaque contrôle de zone réactive, vous définissez la forme (un cercle, un rectangle ou un polygone) et les coordonnées qui spécifient l’emplacement et la taille de la zone réactive. Par exemple, si vous créez une zone réactive circulaire, vous définissez les coordonnées x et y du centre du cercle et le rayon du cercle.

Vous pouvez définir le nombre de zones réactives dont vous avez besoin pour l’image. Vous n’êtes pas obligé de définir des zones réactives pour couvrir entièrement le graphique.

Remarque :
Vous pouvez définir des zones réactives qui se chevauchent. Chaque zone réactive possède une valeur index-Z ; si un utilisateur clique sur une zone qui est définie par deux zones réactives ou plus qui se chevauchent, celle dont l’ordre-Z est le plus élevé est celle qui est sélectionnée.

Pour définir des zones réactives pour un contrôle ImageMap

1. En mode Création, cliquez avec le bouton droit sur le contrôle ImageMap , puis cliquez sur Propriétés dans le menu contextuel.

2. Cliquez sur le bouton représentant trois points en regard de la propriété HotSpots pour ouvrir la boîte de dialogue Éditeurde collectionsde zone réactive.

3. Cliquez sur la flèche à droite du bouton Ajouter, puis cliquez sur le type de zone réactive que vous souhaitez ajouter : CircleHotSpot , RectangleHotSpot ou PolygonHotSpot .

4. Dans la zone Propriétés, définissez les propriétés de votre zone réactive.

Dessin de zones réactives graphiques

Vous ne pouvez pas dessiner directement les zones réactives d’un contrôle ImageMap pour ASP.NET, mais vous pouvez utiliser les outils dédiés aux zones réactives Microsoft Expression Web pour disposer les zones réactives sur votre graphique, puis copier et coller ces coordonnées en tant que propriétés dans la boîte de dialogue Éditeur de collections de zone réactive.

Pour utiliser des coordonnées graphiques dans un contrôle ImageMap

1. Faites glisser l’image sur la page en mode Création.

2. Ouvrez la barre d’outils Images si ce n’est pas déjà fait en cliquant sur Barres d’outils dans le menu Affichage, puis en cliquant sur Images.

3. Cliquez sur le bouton Zone réactive polygonale, Zone réactive circulaire ou Zone réactive rectangulaire, puis dessinez la zone réactive dans votre image. Pour plus d’informations, voir Ajouter ou modifier une zone réactive.

4. En mode Code, copiez les coordonnées de votre zone réactive.

5. Cliquez avec le bouton droit sur le contrôle ImageMap et cliquez sur Propriétés.

6. Cliquez sur le bouton représentant trois points en regard de la propriété HotSpot pour ouvrir la boîte de dialogue Éditeur de collections de zone réactive.

7. Sélectionnez votre zone réactive dans la zone Membres.

8. Collez les valeurs des coordonnées dans l’emplacement dédié aux propriétés de la zone Propriétés.

Par exemple, si vous dessinez une zone réactive circulaire, triangulaire et polygonale dans une image, vous obtiendrez un résultat semblable à ce qui suit, en mode Code :

<area href="page.htm" shape="circle" coords="177,197,84" 
<area href="page.htm" shape="polygon" coords="392,113,466,252,310,252" />

Vous pouvez copier les valeurs "coords" du cercle et les appliquer aux propriétés d’une zone réactive circulaire . Le premier nombre, 177, spécifie la valeur de la coordonnée X. Le deuxième nombre, 197, spécifie la valeur de la coordonnée Y et le troisième nombre, 84, spécifie la valeur du rayon.

De la même façon, vous pouvez copier directement les valeurs "coords" du polygone dans la propriété Coordinates d’une zone réactive polygonale  : 392,113,466,252,310,252.

Description

Vous pouvez spécifier les événements qui se produisent lorsqu’un utilisateur clique sur une zone réactive dans un contrôle ImageMap . Chaque zone réactive peut être configurée comme un lien hypertexte accédant à une URL que vous fournissez pour cette zone réactive. Vous pouvez aussi configurer le contrôle afin qu’il effectue une publication lorsqu’un utilisateur clique sur une zone réactive, en fournissant une valeur unique pour chaque zone réactive. La publication déclenche l’événement Click du contrôle ImageMap . Dans le gestionnaire d’événements, vous pouvez lire la valeur unique que vous assignez à chaque zone réactive. Pour des informations détaillées sur les réponses aux clics des utilisateurs dans un contrôle ImageMap , voir Comment : répondre aux clics d’un utilisateur dans des contrôles serveur Web ImageMap   dans MSDN Library.