Share via


Sintaxe declarativa do controle de servidor de HtmlInputImage

Cria um controle de servidor que mapeia para o <input type=image> elemento HTML e permite que você criar um botão que exibe uma imagem.

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

Comentários

Use o HtmlInputImage o controle para programar o HTML para <input type=image> elemento. Você pode usar esse controle em conjunto com o HtmlInputText, HtmlTextAreae outros controles para construir formulários entrada usuário. Como esse controle é o <input type=image> elemento que é executado no servidor, ele oferece a mesma personalização do botão como HTML. Esse controle oferece uma alternativa para navegadores que não oferecem suporte a HTML dinâmico (DHTML) e o HtmlButton de controle.

Observação

Esse controle não exige uma marca de fechamento.

Uma das vantagens dos controles HTML sobre os controles da Web que eventos do lado do servidor não entrem em conflito com os eventos que ocorrem no cliente, a menos que o servidor e o cliente de código próprios countermand uns aos outros. Se for esse o caso, você pode usar os eventos DHTML para modificar a aparência de qualquer imagem que você incluir na sua página de Web Forms.

Exemplo

O exemplo a seguir compara a um controle de botão de imagem estática com um controle de botão de imagem que usa o DHTML onMouseOver evento (que exibe a imagem de um banana) e o onMouseOut o evento (que exibe a imagem original de coentro). Ambos os botões de imagem incluem um OnServerClick manipulador de eventos.

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

Consulte também

Referência

HtmlInputImage

Outros recursos

HTML Server Controls