Поделиться через

Декларативный синтаксис серверного элемента управления HtmlInputImage

  • Статья

Создает серверный элемент управления, сопоставляемый с HTML-элементом <input type=image>, и позволяет создать кнопку, посредством которой выводится изображение.

<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-элементов управления по сравнению с веб-элементами управления является то, что события на стороне сервера не конфликтуют с событиями на стороне клиента, если код сервера и клиента не противоречит друг другу. В этом случае можно использовать события динамического HTML (DHTML) для изменения любого изображения, имеющегося на странице Web Forms.

Пример

В следующем примере выполняется сравнение элемента управления "кнопка" со статическим изображением с таким же элементом управления, использующим событие 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-элементы управления