Programming/.NET
ImageMap 컨트롤을 이용하면 이미지를 특정 영역으로 구분하여 처리할 수 있습니다.
<asp:ImageMap ID="ImageMap1" runat="server" ImageUrl="~/images/keyboard.jpg"></asp:ImageMap>
ImageMap 컨트롤을 활용하려면 우선 위와 같이 대상이 될 이미지를 지정하고 할당할 영역을 HotSpot 요소로 추가합니다.
<asp:ImageMap ID="ImageMap1" runat="server" ImageUrl="~/images/keyboard.jpg">
            <asp:RectangleHotSpot Left="1040" Right="1050" Top="900" Bottom="1020" AlternateText="H키" PostBackValue="H" />
</asp:ImageMap>
예제에서는 RectangleHotSpot 요소를 추가하여 이미지에 직사각형 영역을 잡고 Left, Right, Top, Bottom 속성을 사용해 구체적인 영역의 위치를 지정하였습니다. 필요하다면 CircleHotSpot 으로 원형을, PolygonHotSpot 다각형 영역을 잡을 수 있으며 각각에 맞는 위치를 설정하면 됩니다.

 주요속성/이벤트

(1) ImageUrl

map 대상이 될 이미지를 지정합니다.

(2) HotSpotMode

이미지에서 특정 영역을 선택하는 경우 동작할 방법을 지정하는 것으로 이 속성을 Inactive 로하면 어떠한 처리도 수행하지 않으며 영역을 선택하는 것도 불가능합니다.

반면 Navigate 로 지정하면 각 HotSpot에 NavigateUrl 속성을 추가적으로  정의해야 하며 이 속성값을 통해 원하는 페이지나 사이트로 이동하도록 할 수 있습니다.

마지막으로 값을 PostBack 으로 지정시 자체적으로 PostBack을 일으키도록 할 수 있는데 이때는 OnClick 이벤트를 구현하여 다음과 같이 내부에서 선택한 영역의 값을 읽어오도록 할 수 있습니다.
protected void ImageMap1_Click(object sender, ImageMapEventArgs e)
{
    Response.Write(e.PostBackValue);
}
선택한 영역에 대한 PostBackValue 값은 각 HotSpot 에 PostBackValue 속성을 사용하여 설정할 수 있습니다.

'Programming > .NET' 카테고리의 다른 글

[ASP.NET] ValidationGroup  (0) 2014.02.19
[ASP.NET] MasterPage  (0) 2014.02.18
[ASP.NET] ImageMap  (0) 2014.02.17
[ASP.NET] Image  (0) 2014.02.13
[ASP.NET] 클라이언트 콜백(Client Callback)  (0) 2014.02.12
[ASP.NET] CheckBox  (0) 2014.02.11
0 0