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
-
Add a Click event handler for the ImageMap control. The second argument of the handler must be of type ImageMapEventArgs.
-
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>
