Share via

ImageMap 웹 서버 컨트롤 선언 구문

  • 아티클

업데이트: 2007년 11월

페이지에 이미지를 표시하는 컨트롤을 만듭니다. ImageMap 컨트롤 안에 정의되어 있는 핫 스폿 영역을 클릭하면 이 컨트롤은 서버에 포스트백을 생성하거나 지정된 URL로 이동합니다.

<asp:ImageMap
    AccessKey="string"
    AlternateText="string"
    BackColor="color name|#dddddd"
    BorderColor="color name|#dddddd"
    BorderStyle="NotSet|None|Dotted|Dashed|Solid|Double|Groove|Ridge|
        Inset|Outset"
    BorderWidth="size"
    CssClass="string"
    DescriptionUrl="uri"
    Enabled="True|False"
    EnableTheming="True|False"
    EnableViewState="True|False"
    ForeColor="color name|#dddddd"
    GenerateEmptyAlternateText="True|False"
    Height="size"
    HotSpotMode="NotSet|Navigate|PostBack|Inactive"
    ID="string"
    ImageAlign="NotSet|Left|Right|Baseline|Top|Middle|Bottom|
        AbsBottom|AbsMiddle|TextTop"
    ImageUrl="uri"
    OnClick="Click event handler"
    OnDataBinding="DataBinding event handler"
    OnDisposed="Disposed event handler"
    OnInit="Init event handler"
    OnLoad="Load event handler"
    OnPreRender="PreRender event handler"
    OnUnload="Unload event handler"
    runat="server"
    SkinID="string"
    Style="string"
    TabIndex="integer"
    Target="string"
    ToolTip="string"
    Visible="True|False"
    Width="size"
>
            <asp:CircleHotSpot
                AccessKey="string"
                AlternateText="string"
                HotSpotMode="NotSet|Navigate|PostBack|Inactive"
                href="uri"
                PostBackValue="string"
                Radius="integer"
                TabIndex="integer"
                Target="string|_blank|_parent|_search|_self|_top"
                X="integer"
                Y="integer"
            />
            <asp:PolygonHotSpot
                AccessKey="string"
                AlternateText="string"
                Coordinates="string"
                HotSpotMode="NotSet|Navigate|PostBack|Inactive"
                href="uri"
                PostBackValue="string"
                TabIndex="integer"
                Target="string|_blank|_parent|_search|_self|_top"
            />
            <asp:RectangleHotSpot
                AccessKey="string"
                AlternateText="string"
                Bottom="integer"
                HotSpotMode="NotSet|Navigate|PostBack|Inactive"
                Left="integer"
                href="uri"
                PostBackValue="string"
                Right="integer"
                TabIndex="integer"
                Target="string|_blank|_parent|_search|_self|_top"
                Top="integer"
            />
</asp:ImageMap>

설명

ImageMap 컨트롤을 사용하면 정의된 핫 스폿 영역이 포함된 이미지를 만들 수 있습니다. 사용자가 핫 스폿 영역을 클릭하면 이 컨트롤은 서버에 포스트백을 생성하거나 지정된 URL로 이동합니다.

ImageMap 컨트롤의 사용에 대한 자세한 내용은 ImageMap 웹 서버 컨트롤 개요를 참조하십시오.

핫 스폿 기능은 필요하지 않고 사용자가 클릭한 위치의 좌표만 캡처해야 할 경우에 Image 컨트롤을 유용하게 사용할 수 있습니다.

예제

다음 코드 예제에서는 CircleHotSpot 개체 두 개가 포함된 ImageMap 컨트롤을 선언적으로 만드는 방법을 보여 줍니다. 여기에서는 HotSpot.HotSpotMode 속성이 HotSpotMode.Navigate로 설정되기 때문에 사용자가 원형 핫 스폿 영역 중 하나를 클릭할 때마다 페이지가 지정된 URL로 이동합니다. 이 예제를 제대로 실행하려면 ImageUrl 속성에서 사용할 이미지를 지정하고, 응용 프로그램에서 이미지를 찾을 수 있도록 이미지 경로를 정확히 업데이트해야 합니다.

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="head1" runat="server">
  <title>ImageMap Class Navigate Example</title>
</head>
  <body>
    <form id="form1" runat="server">

      <h3>ImageMap Class Navigate Example</h3>

      <h4>Shopping Choices:</h4>

       <asp:imagemap id="Shop"           
        imageurl="Images/ShopChoice.jpg"
        alternatetext="Shopping choices" 
        runat="Server">    

        <asp:circlehotspot
          navigateurl="http://www.tailspintoys.com"
          x="145"
          y="120"
          radius="75"
          hotspotmode="Navigate"
          alternatetext="Shop for toys">           
        </asp:circlehotspot> 

        <asp:circlehotspot
          navigateurl="http://www.cohowinery.com"
          x="145"
          y="290"
          radius="75"
          hotspotmode="Navigate"
          alternatetext="Shop for wine">
        </asp:circlehotspot>     

      </asp:imagemap>                 

    </form>      
  </body>
</html>

<%@ page language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="head1" runat="server">
  <title>ImageMap Class Navigate Example</title>
</head>
  <body>
    <form id="form1" runat="server">

      <h3>ImageMap Class Navigate Example</h3>

      <h4>Shopping Choices:</h4>

      <asp:imagemap id="Shop"           
        imageurl="Images/ShopChoice.jpg"
        width="150" 
        height="360"
        alternatetext="Shopping choices" 
        runat="Server">    

        <asp:circlehotspot
          navigateurl="http://www.tailspintoys.com"
          x="75"
          y="290"
          radius="75"
          hotspotmode="Navigate"
          alternatetext="Shop for toys">           
        </asp:circlehotspot> 

        <asp:circlehotspot
          navigateurl="http://www.cohowinery.com"
          x="75"
          y="120"
          radius="75"
          hotspotmode="Navigate"
          alternatetext="Shop for wine">
        </asp:circlehotspot>     

      </asp:imagemap>                 

    </form>      
  </body>
</html>

참고 항목

개념

ImageMap 웹 서버 컨트롤 개요

참조

ImageMap