Sintaxis declarativa del control de servidor HtmlInputImage
Crea un control de servidor que se asigna al elemento HTML <input type=image> y permite crear un botón que muestra una imagen.
<input
Type="Image"
EnableViewState="False|True"
Id="string"
Visible="False|True"
OnDataBinding="OnDataBinding event handler"
OnDisposed="OnDisposed event handler"
OnInit="OnInit event handler"
OnLoad="OnLoad event handler"
OnPreRender="OnPreRender event handler"
OnServerClick="OnServerClick event handler"
OnUnload="OnUnload event handler"
runat="server"
/>
Comentarios
Utilice el control HtmlInputImage para programar basándose en el elemento HTML <input type=image>. Puede utilizar este control en combinación con los controles HtmlInputText, HtmlTextArea y otros controles para construir formularios de introducción de datos del usuario. Debido a que este control es el elemento <input type=image> que se ejecuta en el servidor, ofrece las mismas posibilidades de personalización del botón que HTML. Este control constituye una alternativa para los exploradores que no admiten HTML dinámico (DHTML) y el control HtmlButton.
.gif "Nota") Nota |
|---|
Este control no requiere una etiqueta de cierre. |
Una de las ventajas de los controles HTML sobre los controles Web es que los eventos del servidor no entran en conflicto con los eventos generados en el cliente, a no ser que el código del cliente y del servidor se anulen uno al otro. En este caso, puede utilizar eventos DHTML para modificar el aspecto de cualquier imagen que incluya en la página de formularios Web Forms.
Ejemplo
En el ejemplo siguiente se compara un control de botón de imagen estático con un control de botón de imagen que utiliza el evento DHTML onMouseOver (que muestra la imagen de un plátano) y el evento onMouseOut (que muestra la imagen original de un mango). Ambos botones de imagen incluyen un controlador de eventos OnServerClick.
<%@ 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>HtmlInputImage Control</title>
<script runat="server">
Sub Button1_Click(Source As Object, e As ImageClickEventArgs)
Span1.InnerHtml = "You clicked button1"
End Sub
Sub Button2_Click(Source As Object, e As ImageClickEventArgs)
Span1.InnerHtml = "You clicked button2"
End Sub
</script>
</head>
<body>
<h3>HtmlInputImage Sample</h3>
<form id="Form1" runat="server">
<input type="image"
id="InputImage1"
src="/images/mango.jpg"
onserverclick="Button1_Click"
runat="server" />
<br />
<input type="image"
id="InputImage2"
src="/images/mango.jpg"
onmouseover="this.src='/images/banana.jpg';"
onmouseout="this.src='/images/mango.jpg';"
onserverclick="Button2_Click"
runat="server" />
With rollover effect (HTML 4.0)
<br />
<span id="Span1" 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>HtmlInputImage Control</title>
<script runat="server">
void Button1_Click(object Source, ImageClickEventArgs e)
{
Span1.InnerHtml="You clicked button1";
}
void Button2_Click(object Source, ImageClickEventArgs e)
{
Span1.InnerHtml="You clicked button2";
}
</script>
</head>
<body>
<h3>HtmlInputImage Sample</h3>
<form id="Form1" runat="server">
<input type="image"
id="InputImage1"
src="/images/mango.jpg"
onserverclick="Button1_Click"
runat="server" />
<br />
<input type="image"
id="InputImage2"
src="/images/mango.jpg"
onmouseover="this.src='/images/banana.jpg';"
onmouseout="this.src='/images/mango.jpg';"
onserverclick="Button2_Click"
runat="server" />
With rollover effect (HTML 4.0)
<br />
<span id="Span1" runat="server" />
</form>
</body>
</html>