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

JavaScript Editor jscript editor     Web designer 



Main Page

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.

Visual BasicВ CopyCode imageCopy Code
<%@ Page Language="VB" %>
<script runat="server">
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" 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>
C#В CopyCode imageCopy Code
<% @ 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



JavaScript Editor jscript editor     Web designer