Cómo: Responder cuando el usuario hace clic en controles ImageMap de servidor Web

Artículo
10/22/2014

Actualización: noviembre 2007

Puede configurar un control ImageMap, o una región individual (zona activa) en él, para que cuando los usuarios hagan clic en una zona activa concreta, el control vaya a otra página o realice una devolución de datos. Puede reemplazar la configuración del control en cada zona activa.

Si el control ImageMap o una zona activa en particular se han configurado para desplazarse a una dirección URL concreta, no tendrá la oportunidad de responder directamente al clic del usuario. Sin embargo, si el control o la zona activa se configuran para que se realice una devolución de datos, puede escribir un controlador para el evento y determinar en qué zona activa se ha hecho clic.

Para responder cuando un usuario hace clic en un control ImageMap

Agregue un controlador de eventos Click para el control ImageMap. El segundo argumento del controlador debe ser de tipo ImageMapEventArgs.
En el controlador de eventos, lea la propiedad PostBackValue del objeto ImageMapEventArgs para determinar en qué zona activa se ha hecho clic.

Ejemplo

El siguiente ejemplo de código muestra cómo se responde cuando un usuario hace clic en un control ImageMap. La página contiene un control ImageMap con cuatro zonas activas rectangulares. La propiedad PostBackValue de cada una de estas zonas se establece en un valor único. El código del controlador comprueba cada valor y muestra una respuesta adecuada.

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

Vea también

Conceptos

Información general sobre ImageMap (Control de servidor Web)

Otros recursos

Cómo: Agregar controles ImageMap de servidor Web a una página de formularios Web Forms

Compartir a través de