Share via

ImageButton 웹 서버 컨트롤 선언 구문

  • 아티클

업데이트: 2007년 11월

이 컨트롤을 사용하면 사용자가 이미지를 클릭할 경우의 동작을 처리하여 이미지 맵과 비슷한 기능을 얻을 수 있습니다.

<asp:ImageButton
    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"
    CausesValidation="True|False"
    CommandArgument="string"
    CommandName="string"
    CssClass="string"
    DescriptionUrl="uri"
    Enabled="True|False"
    EnableTheming="True|False"
    EnableViewState="True|False"
    ForeColor="color name|#dddddd"
    Height="size"
    ID="string"
    ImageAlign="NotSet|Left|Right|Baseline|Top|Middle|Bottom|
        AbsBottom|AbsMiddle|TextTop"
    ImageUrl="uri"
    OnClick="Click event handler"
    OnClientClick="string"
    OnCommand="Command 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"
    PostBackUrl="uri"
    runat="server"
    SkinID="string"
    Style="string"
    TabIndex="integer"
    ToolTip="string"
    ValidationGroup="string"
    Visible="True|False"
    Width="size"
/>

설명

ImageButton 컨트롤을 사용하면 마우스 클릭에 응답하는 이미지를 표시할 수 있습니다. 컨트롤에 표시할 이미지를 지정하려면 ImageUrl 속성을 설정합니다.

ImageButton 컨트롤을 클릭하면 Click 이벤트와 Command 이벤트가 모두 발생됩니다.

이미지를 클릭한 위치의 좌표를 OnClick 이벤트 처리기를 사용하여 프로그래밍 방식으로 확인할 수 있습니다. 그런 다음 좌표 값에 기초하여 응답하는 코드를 작성할 수 있습니다. 원점(0, 0)은 이미지의 왼쪽 위 모퉁이에 있습니다.

OnCommand 이벤트 처리기를 사용하면 ImageButton 컨트롤이 명령 단추처럼 동작하도록 지정할 수 있습니다. CommandName 속성을 사용하여 명령 이름을 컨트롤과 연결할 수 있습니다. 이렇게 하면 같은 웹 페이지에 여러 개의 ImageButton 컨트롤을 배치할 수 있습니다. 그런 다음 OnCommand 이벤트 처리기에서 프로그래밍 방식으로 CommandName 속성 값을 식별하여 각 ImageButton 컨트롤을 클릭하는 경우 수행되는 동작을 확인할 수 있습니다. 또한 CommandArgument 속성을 사용하면 오름차순 정렬을 지정하는 것과 같이 명령에 대한 추가 정보를 전달할 수도 있습니다.

참고

<asp:ImageButton> 요소에는 내용이 없으므로 별도의 닫는 태그 대신 />를 사용하여 태그를 닫을 수 있습니다.

기본적으로 ImageButton 컨트롤을 클릭하면 페이지 유효성 검사가 수행됩니다. 페이지 유효성 검사에서는 페이지에 있는 유효성 검사 컨트롤과 연결된 입력 컨트롤이 유효성 검사 컨트롤에서 지정한 유효성 검사 규칙을 통과하는지 여부를 확인합니다. reset 단추와 같이 이 동작을 비활성화해야 하는 ImageButton 컨트롤에 대해서는 CausesValidation 속성을 false로 설정합니다.

ImageButton 웹 서버 컨트롤의 속성과 이벤트에 대한 자세한 내용은 ImageButton 클래스 설명서를 참조하십시오.

예제

다음 예제에서는 마우스 포인터로 이미지를 클릭하는 경우 해당 마우스 포인터의 좌표를 표시하기 위해 ImageButton 컨트롤을 사용하는 방법을 보여 줍니다.

참고

다음 코드 샘플에서는 단일 파일 코드 모델을 사용하며 코드 숨김 파일에 직접 복사되는 경우에는 올바르게 작동하지 않을 수 있습니다. 이 코드 샘플을 확장명이 .aspx인 빈 텍스트 파일에 복사해야 합니다. Web Forms 코드 모델에 대한 자세한 내용은 ASP.NET 웹 페이지 코드 모델을 참조하십시오.

<%@ Page Language="VB" AutoEventWireup="True" %>
<!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>
    <title>ImageButton Sample</title>
<script language="VB" runat="server">

      Sub ImageButton_Click(sender As Object, e As ImageClickEventArgs) 
         Label1.Text = "You clicked the ImageButton control at the coordinates: (" & _ 
                       e.X.ToString() & ", " & e.Y.ToString() & ")"
      End Sub

   </script>

</head>

<body>

   <form id="form1" runat="server">

      <h3>ImageButton Sample</h3>

      Click anywhere on the image.<br /><br />

      <asp:ImageButton id="imagebutton1" runat="server"
           AlternateText="ImageButton 1"
           ImageAlign="left"
           ImageUrl="images/pict.jpg"
           OnClick="ImageButton_Click"/>

      <br /><br />

      <asp:label id="Label1" runat="server"/>

   </form>

</body>
</html>


<%@ Page Language="C#" AutoEventWireup="True" %>
<!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>
    <title>ImageButton Sample</title>
<script language="C#" runat="server">

      void ImageButton_Click(object sender, ImageClickEventArgs e) 
      {
         Label1.Text = "You clicked the ImageButton control at the coordinates: (" + 
                       e.X.ToString() + ", " + e.Y.ToString() + ")";
      }

   </script>

</head>

<body>

   <form id="form1" runat="server">

      <h3>ImageButton Sample</h3>

      Click anywhere on the image.<br /><br />

      <asp:ImageButton id="imagebutton1" runat="server"
           AlternateText="ImageButton 1"
           ImageAlign="left"
           ImageUrl="images/pict.jpg"
           OnClick="ImageButton_Click"/>

      <br /><br />

      <asp:label id="Label1" runat="server"/>

   </form>

</body>
</html>


<%@ Page Language="JScript" AutoEventWireup="True" %>
<!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>
    <title>ImageButton Sample</title>
<script language="JSCRIPT" runat="server">

      function ImageButton_Click(sender : Object, e : ImageClickEventArgs) {
         Label1.Text = "You clicked the ImageButton control at the coordinates: (" + e.X.ToString() + ", " + e.Y.ToString() + ")"
      }

   </script>

</head>

<body>

   <form id="form1" runat="server">

      <h3>ImageButton Sample</h3>

      Click anywhere on the image.<br /><br />

      <asp:ImageButton id="imagebutton1" runat="server"
           AlternateText="ImageButton 1"
           ImageAlign="left"
           ImageUrl="images/pict.jpg"
           OnClick="ImageButton_Click"/>

      <br /><br />

      <asp:label id="Label1" runat="server"/>

   </form>

</body>
</html>

참고 항목

참조

ImageButton

Button 웹 서버 컨트롤 선언 구문

기타 리소스

웹 서버 컨트롤 구문