Sintaxis declarativa del control de servidor Web ImageButton
Actualización: noviembre 2007
Permite controlar los clics que hace el usuario en una imagen, lo cual proporciona una funcionalidad similar a un mapa de imagen.
<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"
/>
Comentarios
Utilice el control ImageButton para mostrar una imagen que responde a los clics del mouse (ratón). Para especificar la imagen que se va a mostrar en el control, establezca el valor de la propiedad ImageUrl.
Se provocan los eventos Click y Command cuando se hace clic en el control ImageButton.
Con ayuda del 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 el orden ascendente.
Nota
Dado que el elemento <asp:ImageButton> no tiene contenido, se puede cerrar la etiqueta con /> en lugar de utilizar 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 necesite deshabilitar este comportamiento, como un botón reset, establezca el valor de la propiedad CausesValidation en false.
Para obtener más información sobre los eventos y propiedades del control de servidor Web ImageButton, consulte la documentación referente a la clase ImageButton.
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.
Nota
En el siguiente ejemplo de código se utiliza el modelo de código de un solo archivo. Puede que el ejemplo no funcione correctamente si se copia directamente a un archivo de código subyacente. Este ejemplo de código debe copiarse a un archivo de texto vacío que tenga la extensión .aspx. Para obtener más información sobre el modelo de código de los formularios Web Forms, vea Modelo de código de las páginas web 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>
Vea también
Referencia
Sintaxis declarativa del control de servidor Web Button