Export (0) Print
Expand All

How to: Respond to User Clicks in ImageMap Web Server Controls

You can configure an ImageMap control, or an individual region (hot spot) in it, so that when users click a specific hot spot, the control either goes to another page or performs a postback. You can override the control's settings for each hot spot.

If the ImageMap control or an individual hot spot has been configured to go to a specific URL, you do not have an opportunity to respond directly to the click. However, if the control or hot spot is configured to perform a postback, you can write a handler for the event and determine which hot spot was clicked.

To respond to a user click in an ImageMap control

  1. Add a Click event handler for the ImageMap control. The second argument of the handler must be of type ImageMapEventArgs.

  2. In the event handler, read the PostBackValue property of the ImageMapEventArgs object to determine which hot spot was clicked.

Example

The following code example shows how to respond to a user click in an ImageMap control. The page contains an ImageMap control with four rectangular hot spots. Each hot spot's PostBackValue property is set to a unique value. The code in the handler checks for each value and displays an appropriate response.

<% @ Page Language="C#" %>
<script runat="server">
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" runat="server">
    <div>
    <asp:Label runat="server" ID="Label1" />
    <br />
    <br />
        <asp:ImageMap ID="ImageMap1" ImageUrl="~/Images/MapTest.PNG" 
            runat="server" 
            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>

See Also

Community Additions

ADD
Show:
© 2015 Microsoft