Deklarativní syntaxe serverového ovládacího prvku HtmlInputImage
Vytvoří serverový ovládací prvek, který se mapuje na prvek <input type=image> jazyka HTML a umožňuje vytvořit tlačítko, které zobrazí obrázek.
<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"
/>
Poznámky
Použití HtmlInputImage řízení proti HTML programu <input type=image> prvku. Tento ovládací prvek můžete použít ve spojení s HtmlInputText, HtmlTextArea a dalšími ovládacími prvky pro sestavení formulářů pro vstup uživatele. Jelikož je tento ovládací prvek element <input type=image>, který je spuštěn serveru, nabízí stejné přizpůsobení tlačítka jako HTML. Tento ovládací prvek nabízí alternativu pro prohlížeče, které nepodporují dynamické HTML (DHTML) a ovládací prvek HtmlButton.
.gif "Poznámka") Poznámka |
|---|
Tento ovládací prvek nevyžaduje koncovou značku. |
Jednou z výhod ovládacích prvků jazyka HTML oproti webových ovládacích prvků je, že události na straně serveru nejsou v rozporu s událostmi, ke kterým dochází u klienta, pokud se serverový a klientův kód na sebe navzájem odvolávají. Pokud se jedná o tento případ, můžete pomocí událostí DHTML změnit vzhled libovolného obrázku, který vložíte na vaši stránku Webových formulářů.
Příklad
Následující příklad porovnává tlačítko se statickým obrázkem s tlačítkem s obrázkem, které používá DHTML událost onMouseOver (která zobrazuje obrázek banánu) a událost onMouseOut (která zobrazuje původní obrázek manga). Obě tlačítka s obrázkem obsahují obslužnou rutinu události 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>