ASP.NET & Core를 다루는 기술: 6.7.2 따라하기

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 페이지로 이동하도록 설정한다. 이렇게 사각형 영역에 대한 좌표를 설정한다.

신간 소식 구독하기

뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.