Como: Responder a cliques de usuário nos controles do servidor Web ImageMap

  • Artigo

Você pode configurar um controle ImageMap, ou uma região individual (hot spot) nele, então quando os usuários clicarem no ponto de acesso, o controlador poderá tanto ir para uma página quanto realizar uma postagem.Você pode substituir configurações do controle para cada ponto de acesso.

Se o controlador ImageMap ou um ponto de acesso individual for configurado para uma URL específica, você não tem a oportunidade para responder diretamente ao clique.Entretanto, se o controle ou ponto de acesso é configurado para executar uma nova postagem, você pode escrever um manipulador para o evento e verificar se o ponto de acesso foi clicado.

Para responder a um clique do usuário em um controle ImageMap

  1. Adicione um evento Click manipulador para o controle ImageMap.O segundo argumento para o manipulador deve ser do tipo ImageMapEventArgs.

  2. No manipulador de eventos, leia a propriedade PostBackValue do objeto ImageMapEventArgs para determinar qual ponto de acesso foi clicado.

Exemplo

O exemplo de código a seguir mostra como responder a um clique do usuário em um controle ImageMap.A página contém um controle ImageMap com quatro pontos de acesso retangulares.Cada propriedade dos pontos de acesso PostBackValue é definida para um único valor.O código no manipulador verifica cada valor e exibe uma resposta apropriada.

<%@ 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>

Consulte também

Conceitos

Visão geral do controle servidor de Web ImageMap

Outros recursos

Como: Adicionar ImageMap Servidor Web controles a uma página Web Formulários