次の方法で共有

ImageButton Web サーバー コントロールの宣言構文

  • [アーティクル]

更新 : 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 プロパティを設定します。

Click イベントと Command イベントはどちらも、ImageButton コントロールがクリックされたときに発生します。

OnClick イベント ハンドラを使用して、イメージがクリックされた場所の座標をプログラムによって判断できます。次に、その座標の値に基づいて、応答のコードを記述できます。原点 (0, 0) は、イメージの左上隅であることに注意してください。

OnCommand イベント ハンドラを使用して、ImageButton コントロールをコマンド ボタンのように機能させることができます。CommandName プロパティを使用して、コマンド名をコントロールに関連付けることができます。これによって、複数の ImageButton コントロールを同じ Web ページに配置できます。OnCommand イベント ハンドラで、CommandName プロパティの値をプログラムによって識別し、各 ImageButton コントロールがクリックされたときに実行する適切なアクションを判断できます。CommandArgument プロパティを使用して、コマンドに関する追加情報 (昇順の指定など) を渡すこともできます。

1z8fsbyh.alert_note(ja-jp,VS.90).gifメモ :

<asp:ImageButton> 要素には内容が含まれないため、個別に終了タグを使用する代わりに /> でタグを閉じることができます。

既定では、ImageButton コントロールがクリックされたときに、ページの検証が行われます。ページ検証では、ページ上の検証コントロールに関連付けられている入力コントロールが、その検証コントロールによって指定されている入力規則を満たしているかどうかが確認されます。reset ボタンなど、この動作を無効にする必要がある ImageButton コントロールがある場合、CausesValidation プロパティを false に設定します。

ImageButton Web サーバー コントロールのプロパティとイベントの詳細については、ImageButton クラスのドキュメントを参照してください。

使用例

ImageButton コントロールを使用して、イメージ上でマウス ポインタがクリックされたときに、ポインタ位置の座標を表示する方法を次の例に示します。

1z8fsbyh.alert_note(ja-jp,VS.90).gifメモ :

次のコード例では、単一ファイル コード モデルを使用しており、分離コード ファイルに直接コピーすると正常に動作しないことがあります。このコード サンプルは、.aspx 拡張子の空のテキスト ファイルにコピーする必要があります。Web フォームのコード モデルの詳細については、「ASP.NET Web ページのコード モデル」を参照してください。

 
<%@ 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 Web サーバー コントロールの宣言構文

その他の技術情報

Web サーバー コントロール構文