Share via


Deklarative Syntax des HtmlInputImage-Serversteuerelements

[Dieses Dokument dient lediglich Vorschauzwecken und kann in späteren Versionen geändert werden. Leere Themen sind als Platzhalter enthalten.]

Erstellt ein serverseitiges Steuerelement, das dem <input type=image>-HTML-Element zugeordnet wird und das Erstellen einer Schaltfläche ermöglicht, die ein Bild anzeigt.

<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"
    />

Hinweise

Verwenden Sie das HtmlInputImage-Steuerelement, um das <input type=image>-HTML-Element zu programmieren. Sie können dieses Steuerelement in Verbindung mit HtmlInputText, HtmlTextArea und anderen Steuerelementen zur Konstruktion von Benutzereingabeformularen verwenden. Da es sich bei diesem Steuerelement um das <input type=image>-Element handelt, das auf dem Server ausgeführt wird, bietet es die gleichen Möglichkeiten zur Anpassung der Schaltfläche wie HTML. Dieses Steuerelement stellt eine Alternative für Browser dar, die Dynamic HTML (DHTML) und das HtmlButton-Steuerelement nicht unterstützen.

Hinweis

Dieses Steuerelement erfordert kein Endtag.

Einer der Vorteile von HTML-Steuerelementen gegenüber Websteuerelementen liegt darin, dass serverseitige Ereignisse keinen Konflikt mit den Ereignissen verursachen, die auf dem Client auftreten, es sei denn, der Server- und der Clientcode widerrufen sich gegenseitig. In diesem Fall können Sie mithilfe von DHTML-Ereignissen die Darstellung eines in der Web Forms-Seite enthaltenen Bilds ändern.

Beispiel

Im folgenden Beispiel wird ein statisches Steuerelement für eine Bildschaltfläche mit einem Steuerelement für eine Bildschaltfläche verglichen, das das onMouseOver-DHTML-Ereignis (welches das Bild einer Banane anzeigt) und das onMouseOut-Ereignis (welches das ursprüngliche Bild einer Mango anzeigt) verwendet. Beide Bildschaltflächen beinhalten einen OnServerClick-Ereignishandler.

<%@ 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>

Siehe auch

Referenz

HtmlInputImage

Weitere Ressourcen

HTML-Serversteuerelemente