HtmlInputImage 服务器控件声明性语法
[本文档仅供预览,在以后的发行版中可能会发生更改。包含的空白主题用作占位符。]
创建一个服务器端控件,该控件映射到 <input type=image> HTML 元素并允许您创建用于显示图像的按钮。
<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"
/>
备注
使用 HtmlInputImage 控件可以对 HTML <input type=image> 元素进行编程。 可以将此控件与 HtmlInputText、HtmlTextArea 及其他控件一起使用以构造用户输入窗体。 因为此控件是在服务器上运行的 <input type=image> 元素,所以它提供与 HTML 相同的按钮自定义。 此控件可以替代不支持动态 HTML (DHTML) 和 HtmlButton 控件的浏览器。
备注
此控件不需要结束标记。
HTML 控件相对于 Web 控件的优点之一是:服务器端事件不与在客户端发生的事件冲突,除非服务器和客户端的代码本身彼此取消。 如果的确如此,您可以使用 DHTML 事件修改在 Web 窗体页上包含的任何图像的外观。
示例
下面的示例将一个静态图像按钮控件与一个使用 DHTML 的 onMouseOver 事件(显示香蕉图像)和 onMouseOut 事件(显示原始的芒果图像)的图像按钮控件进行比较。 两个图像按钮都包含一个 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>