Partager via

Comment : répondre aux clics d'un utilisateur dans des contrôles serveur Web ImageMap

  • Article

Mise à jour : novembre 2007

Vous pouvez configurer un contrôle ImageMap, ou une région (zone réactive) qu'il contient, de sorte que lorsque les utilisateurs cliquent sur une zone réactive spécifique, le contrôle affiche une autre page ou effectue une publication. Vous pouvez substituer les paramètres du contrôle pour chaque zone réactive.

Si le contrôle ImageMap ou une zone réactive distincte a été configurée pour accéder à une URL spécifique, vous n'avez pas la possibilité de répondre directement au clic. Toutefois, si le contrôle ou la zone réactive est configuré pour effectuer une publication, vous pouvez écrire un gestionnaire pour l'événement, afin de déterminer la zone réactive sur laquelle l'utilisateur a cliqué.

Pour répondre à un clic d'utilisateur dans un contrôle ImageMap

  1. Ajoutez un gestionnaire d'événements Click pour le contrôle ImageMap. Le deuxième argument du gestionnaire doit être du type ImageMapEventArgs.

  2. Dans le gestionnaire d'événements, lisez la propriété PostBackValue de l'objet ImageMapEventArgs pour déterminer la zone réactive sur laquelle un clic a été effectué.

Exemple

L'exemple de code suivant montre comment répondre à un clic d'utilisateur dans un contrôle ImageMap. La page contient un contrôle ImageMap avec quatre zones réactives rectangulaires. Une valeur unique est affectée à la propriété PostBackValue de chaque zone réactive. Le code contenu dans le gestionnaire vérifie chaque valeur et affiche la réponse appropriée.

<%@ Page Language="VB" %>
<script >
Protected Sub ImageMap1_Click(ByVal sender As Object, _
        ByVal e As System.Web.UI.WebControls.ImageMapEventArgs)
    Dim region As String
    Select Case e.PostBackValue
        Case "NW"
            region = "Northwest"
        Case "NE"
           region = "Northeast"
        Case "SE"
            region = "Southeast"
        Case "SW"
            region = "Southwest"
    End Select
    Label1.Text = "You clicked the " & region & " region."
End Sub
</script>

<html>
<body>
    <form id="form1" >
    <div>
    <asp:Label  ID="Label1" />
    <br />
    <br />
        <asp:ImageMap ID="ImageMap1" ImageUrl="~/Images/MapTest.PNG" 
             
            HotSpotMode="PostBack" 
            OnClick="ImageMap1_Click">
         <asp:RectangleHotSpot Bottom="100" Right="100" 
             HotSpotMode="PostBack" PostBackValue="NW" />
         <asp:RectangleHotSpot Bottom="100" Left="100" Right="200" 
             HotSpotMode="PostBack" PostBackValue="NE" />
         <asp:RectangleHotSpot Bottom="200" Right="100" Top="100" 
             PostBackValue="SW" />
         <asp:RectangleHotSpot Bottom="200" Left="100" Right="200" 
             Top="100" PostBackValue="SE" />
        </asp:ImageMap>
    </div>
    </form>
</body>
</html>

<% @ Page Language="C#" %>
<script >
protected void ImageMap1_Click(object sender, ImageMapEventArgs e)
{
    String region = "";
    switch(e.PostBackValue)
    {
        case "NW":
            region = "Northwest";
            break;
        case "NE":
            region = "Northeast";
            break;
        case "SE":
            region = "Southeast";
            break;
        case "SW":
            region = "Southwest";
            break;
    }
    Label1.Text = "You clicked the " + region + " region.";
}
</script>

<html>
<body>
    <form id="form1" >
    <div>
    <asp:Label  ID="Label1" />
    <br />
    <br />
        <asp:ImageMap ID="ImageMap1" ImageUrl="~/Images/MapTest.PNG" 
             
            HotSpotMode="PostBack" 
            OnClick="ImageMap1_Click">
         <asp:RectangleHotSpot Bottom="100" Right="100" 
             HotSpotMode="PostBack" PostBackValue="NW" />
         <asp:RectangleHotSpot Bottom="100" Left="100" Right="200" 
             HotSpotMode="PostBack" PostBackValue="NE" />
         <asp:RectangleHotSpot Bottom="200" Right="100" Top="100" 
             PostBackValue="SW" />
         <asp:RectangleHotSpot Bottom="200" Left="100" Right="200" 
             Top="100" PostBackValue="SE" />
        </asp:ImageMap>
    </div>
    </form>
</body>
</html>

Voir aussi

Concepts

Vue d'ensemble du contrôle serveur Web ImageMap

Autres ressources

Comment : ajouter des contrôles serveur Web ImageMap à une page Web Forms