Практическое руководство. Реакция на щелчки пользователя в серверном веб-элементе управления ImageMap

Статья
10/22/2014

Обновлен: Ноябрь 2007

Элемент управления ImageMap или отдельную область (гиперобъект) в нем можно настроить таким образом, чтобы при щелчке пользователем определенного гиперобъекта элемент управления осуществлял переход на другую страницу или выполнял обратную передачу. Можно переопределить параметры элемента управления для каждого гиперобъекта.

Если элемент управления ImageMap или отдельный гиперобъект настроен на переход по определенному URL-адресу, то реакция непосредственно на сам щелчок невозможна. Тем не менее, если элемент управления или гиперобъект настроен на выполнение обратной передачи, то можно написать обработчик для события и определить, на каком гиперобъекте был выполнен щелчок.

Ответ на щелчок пользователя в элементе управления ImageMap

Добавьте обработчик событий Click для элемента управления ImageMap. Второй аргумент обработчика должен иметь тип ImageMapEventArgs.
В обработчике событий считайте значение свойства PostBackValue объекта ImageMapEventArgs, чтобы определить, на каком гиперобъекте был выполнен щелчок.

Пример

В следующем примере кода показан ответ на щелчок пользователя в элементе управления ImageMap. Страница содержит элемент управления ImageMap с четырьмя прямоугольными гиперобъектами. Для свойства PostBackValue каждого гиперобъекта задается уникальное значение. Код в обработчике проверяет все эти значения и отображает соответствующий ответ.

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

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

См. также

Основные понятия

Общие сведения о серверном веб-элементе управления ImageMap

Другие ресурсы

How to: Add an ImageMap Control to a Web Page

Поделиться через