더북(TheBook)
ASP.NET & Core를 다루는 기술
더북(TheBook)

3. FrmImageMap.aspx 페이지에 다음과 같이 입력한다.

▼  FrmImageMap.aspx

<%@ Page Language="C#" AutoEventWireup="true"
  CodeBehind="FrmImageMap.aspx.cs" Inherits="DevStandardControl.FrmImageMap" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>이미지맵 컨트롤</title>
</head>
<body>
  <form id="form1" runat="server">
      <div>
          <img src="images/img_imagemap.jpg" alt="이미지맵 테스트용 이미지" />
          <hr />
          <asp:ImageMap ID="mapImage" runat="server"
              ImageUrl="~/images/img_imagemap.jpg">
              <asp:RectangleHotSpot NavigateUrl="FrmButton.aspx"
                  Top="0" Left="0" Bottom="20" Right="120" />
              <asp:RectangleHotSpot NavigateUrl="FrmLabel.aspx"
                  Top="20" Left="0" Bottom="40" Right="120" />
          </asp:ImageMap>
      </div>
  </form>
</body>
</html>

 

이미지맵 컨트롤을 사용하면 특정 이미지를 읽어 와 이미지에 좌표를 사용해 영역을 구분한 뒤 서로 다른 URL로 이동할 수 있다. RectangleHotSpot 컨트롤을 사용해 좌표 (0, 0)에서 (20, 120)까지 클릭하면 앞서 미리 작성한 FrmButton.aspx 페이지로 이동한다. (20, 0)에서 (40, 120)까지 클릭하면 FrmLable.aspx 페이지로 이동하도록 설정한다. 이렇게 사각형 영역에 대한 좌표를 설정한다.