ImageMap Control
Reference: ASP.NET 2.0 웹 프로젝트와 실전 프로그래밍
=====================================
ImageMap 은 HTML의 이미지 맵(핫스팟(hot spot)이라고도 한다) 기능을 수행하는 컨트롤입니다. 즉, 이미지의 영역을 나눠서 각 영역이 특정 URl을 링크하도록 하는 서버 컨트롤이 ImageMap입니다. ImageMap은 특정 URL과 연결된 영역을 지정하기 위해 사용되는 3종류의 컨트롤 (CircleHotSpot, RectangleHotSpot, PolygonHotSpot)과 함께 사용 됩니다. 이 컨트롤들은 ImageMap의 자식 컨트롤로서 포함되는데, '핫스팟(hot spot)' 컨트롤이라고 부릅니다. 모든 핫스팟 컨트롤은 링크의 역할(HyperLink처럼)을 하거나 포스트백을 일으키는 버튼의 역할을 할 수도 있습니다.
핫스팟 컨트롤이 링크나 버튼 중 어떤 동작을 할지는 두 가지 수준에서 지정될수 있는데, 첫째는 ImageMap 컨트롤의 HotSpotMode 속성이고, 둘째는 각 핫스팟 컨트롤의 HotSpotMode 속성입니다. ImageMap의 HotSpotMode 속성 값은 자식으로 포함된 핫스팟 컨트롤들의 특성을 한번에 지정할 수 있습니다. 그리고 ImageMap안에 포함된 특정 핫스팟 컨트롤에서 HotSpotMode 속성을 설정하면 해당 컨트롤의 동작 방식이 지정됩니다. 자식 핫스팟 컨트롤의 HotSpotMode 가 ImageMap 의 HotSpotMde보다 우선합니다.
HotSpotMode 속성들:
NotSet: ImageMap에서 이 값이 지정되면 Navigate처럼 동작합니다. 핫스팟 컨트롤에서 NotSet이 지정되면 ImageMap의 HotSpotMode 속성 값을 사용합니다.
Inactive: 아무 동작도 하지 않습니다.
Navigate: 특정 URL에 대한 링크로 동작합니다.
PostBack: 소버로 포스트백해서 Click 이벤트가 발생합니다.
핫스팟 컨트롤은 이미지의 특정 영역에 대한 동작을 정의하는데, 세종류의 핫스팟 컨트롤은 각각 다른 방법으로 담당 영역을 지정합니다. CircleHotSpot은 원형으로, RectangleHotSpot은 직사각형으로, PolygonHotSpot은 임의의 꼭지점을 가진 다각형으로 영역을 지정합니다. 핫스팟에서 사용하는 좌표는 이미지의 좌측 상단 모서리를 기준으로 가로와 세로 방향의 픽셀 개수로 계산합니다.
아래는 ImageMap을 이용하여 간단한 메뉴를 만들어 보는 DEMO 입니다.
============================================================================================
ASP.NET 웹 사이트를 만들고 "ImageMap"이라는 폴더를 만듭니다. 폴더 안에 "ImageMapControlTest"라는 WebForm을 추가 합니다. 웹 사이트에 "Images" 라는 폴더를 만들고 폴더 안에 아래 이미지를 넣습니다.
============================================================================================
Result:
============================================================================================
ImageMapControlTest.aspx
======================
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ImageMapControlTest.aspx.cs" Inherits="ImageMap_ImageMapControlTest" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void ImageMap1_Click(object sender, ImageMapEventArgs e)
{
switch(e.PostBackValue)
{
case "HOME":
Response.Write("You clicked " + e.PostBackValue);
break;
case "PHOTO":
Response.Write("You clicked " + e.PostBackValue);
break;
case "BOARD":
Response.Write("You clicked " + e.PostBackValue);
break;
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>ImageMapControl Test</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ImageMap ID="ImageMap1" runat="server" ImageUrl="../Images/menu.jpg" HotSpotMode="PostBack"
OnClick="ImageMap1_Click">
<asp:RectangleHotSpot Top="0" Left="0" Right="59" Bottom="25" PostBackValue="HOME" />
<asp:RectangleHotSpot Top="0" Left="60" Right="119" Bottom="25" PostBackValue="PHOTO" />
<asp:RectangleHotSpot Top="0" Left="120" Right="180" Bottom="25" PostBackValue="BOARD" />
</asp:ImageMap>
</div>
</form>
</body>
</html>
