다음을 통해 공유

방법: ImageMap 웹 서버 컨트롤에서 사용자 클릭에 응답

  • 아티클

업데이트: 2007년 11월

사용자가 특정 핫 스폿을 클릭하면 ImageMap 컨트롤에서 다른 페이지로 이동하거나 다시 게시를 수행하도록 이 컨트롤 또는 컨트롤의 개별 영역(핫 스폿)을 구성할 수 있습니다. 각 핫 스폿에 대해 컨트롤 설정을 재정의할 수 있습니다.

특정 URL로 이동하도록 ImageMap 컨트롤이나 개별 핫 스폿을 구성한 경우에는 사용자 클릭에 직접 응답할 수 없습니다. 그러나 컨트롤이나 핫 스폿이 다시 게시를 수행하도록 구성된 경우에는 이벤트 처리기를 작성하고 클릭된 핫 스폿을 확인할 수 있습니다.

ImageMap 컨트롤에서 사용자 클릭에 응답하려면

  1. ImageMap 컨트롤에 대한 Click 이벤트 처리기를 추가합니다. 처리기의 두 번째 인수는 ImageMapEventArgs 형식이어야 합니다.

  2. 이벤트 처리기에서 ImageMapEventArgs 개체의 PostBackValue 속성을 읽어 클릭된 핫 스폿을 확인합니다.

예제

다음 코드 예제에서는 ImageMap 컨트롤에서 사용자 클릭에 응답하는 방법을 보여 줍니다. 예제 페이지에는 네 개의 사각형 핫 스폿이 있는 ImageMap 컨트롤이 포함되어 있습니다. 각 핫 스폿의 PostBackValue 속성은 고유 값으로 설정되어 있습니다. 처리기의 코드는 각 값을 검사하여 적절한 응답을 표시합니다.

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

참고 항목

개념

ImageMap 웹 서버 컨트롤 개요

기타 리소스

방법: Web Forms 페이지에 ImageMap 웹 서버 컨트롤 추가