Share via


ImageButton (Control de servidor Web)

Permite controlar los clics que hace el usuario en una imagen, lo cual proporciona una funcionalidad similar a un mapa de imagen.

<asp:ImageButtonid="ImageButton1"      ImageUrl="string"     Command="Command"     CommandArgument="CommandArgument"     CausesValidation="true | false"     OnClick="OnClickMethod"     runat="server"/>

Comentarios

Utilice el control ImageButton para mostrar una imagen que responde a los clics del mouse. Para especificar la imagen que se va a mostrar en el control, establezca la propiedad ImageUrl.

Se provocan los eventos Click y Command cuando se hace clic en el control ImageButton.

Utilizando el controlador de eventos OnClick, se pueden determinar mediante programación las coordenadas del punto donde se ha hecho clic en la imagen. A continuación, se puede crear código de respuesta tomando como base los valores de las coordenadas. Observe que el origen (0, 0) está situado en la esquina superior izquierda de la imagen.

Se puede utilizar el controlador de eventos OnCommand para que el control ImageButton se comporte como un botón de comando. Se puede asociar un nombre de comando al control mediante la propiedad CommandName. Esto permite colocar varios controles ImageButton en la misma página Web. A continuación, se puede identificar mediante programación el valor de la propiedad CommandName en el controlador de eventos OnCommand para determinar la acción apropiada que debe realizarse cuando se hace clic en cada uno de los controles ImageButton. También puede utilizarse la propiedad CommandArgument para pasar más información sobre el comando, como, por ejemplo, especificar el orden ascendente.

Nota   Dado que el elemento <asp:ImageButton> no tiene contenido, se puede cerrar la etiqueta con /> en lugar de una etiqueta de cierre independiente.

De manera predeterminada, se realiza la validación de la página cuando se hace clic en un control ImageButton. La validación de la página determina si los controles de entrada asociados a un control de validación en la página cumplen las reglas de validación especificadas por el control de validación. Si hay un control ImageButton que necesita deshabilitar este comportamiento, como un botón reset, establezca la propiedad CausesValidation en false.

Para obtener más información sobre los eventos y propiedades del control de servidor Web ImageButton, vea la documentación referente a ImageButton (Clase).

Ejemplo

En el siguiente ejemplo se muestra cómo usar un control ImageButton para mostrar las coordenadas del puntero del mouse cuando se hace clic en la imagen.

<%@ Page Language="VB" AutoEventWireup="True" %>
<html>
<head>
   <script 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 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>
[C#]
<%@ Page Language="C#" AutoEventWireup="True" %>
<html>
<head>
   <script runat="server">
      void ImageButton_Click(object Source, ImageClickEventArgs e) 
      {
         Label1.Text="You clicked the ImageButton control at the " +
                     "Coordinates: (" + e.X.ToString() + ", " +
                     e.Y.ToString() + ")";
      }
   </script>
</head>
<body>
   <form runat="server">
      <h3>ImageButton Sample</h3>
      Click anywhere on the image.<br><br>
      <asp:ImageButton id="imagebutton1"
           AlternateText="ImageButton 1"
           ImageAlign="left"
           ImageUrl="images\pict.jpg"
           OnClick="ImageButton_Click"
           runat="server"/>
      <br><br>
      <asp:Label id="Label1" 
           runat="server"/>
   </form>
</body>
</html>

Vea también

Controles de servidor Web | ImageButton (Clase)