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> 元素进行编程。 可以将此控件与 HtmlInputTextHtmlTextArea 及其他控件一起使用以构造用户输入窗体。 因为此控件是在服务器上运行的 <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" />
        &nbsp;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" />
        &nbsp;With rollover effect (HTML 4.0)
        <br />
        <span id="Span1" runat="server" />
    </form>
</body>
</html>

请参见

参考

HtmlInputImage

其他资源

HTML 服务器控件