HtmlImage Server Control Declarative Syntax

  • Article

Creates a server-side control that maps to the <img> HTML element and allows you to display an image.

<img 
    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"
    OnUnload="OnUnload event handler"
    runat="server"
    />

Remarks

Use the HtmlImage control to program against the HTML <img> element. This control allows you to dynamically set and retrieve the image's source, width, height, border width, alternate text, and alignment by using the Src, Width, Height, Border, Alt, and Align properties, respectively.

Note

This control does not require a closing tag.

Example

The following example shows how to change a displayed image, based on user choices. It specifies the /images directory as the source path for the images to display. The value selected in the HtmlSelect control in the Web Forms page determines which image to display from the /images directory.

<%@ 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>HtmlImage Control</title>

   <script runat="server">
      Sub SubmitBtn_Click(Sender As Object, e As EventArgs)
         Image1.Src = "/images/" & Select1.Value
      End Sub
   </script>

</head>
<body>
   <h3>HtmlImage Sample</h3>
   <form id="Form1" runat="server">
      <img id="Image1" src="/images/cereal1.gif" runat="server" alt="Cereal bowl"/>
      <br />
      <br />
      Select an image file to display:
      <select id="Select1" runat="server">
         <option value="Cereal1.gif">Healthy Grains</option>
         <option value="Cereal2.gif">Corn Flake Cereal</option>
         <option value="Cereal3.gif">U.F.O.S</option>
         <option value="Cereal4.gif">Oatey O's</option>
         <option value="Cereal5.gif">Strike</option>
         <option value="Cereal7.gif">Fruity Pops</option>
       </select>
       <br />
       <br />
       <input id="Submit1" type="submit" runat="server" value="Apply"
              onserverclick="SubmitBtn_Click" />
   </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>HtmlImage Control</title>

    <script runat="server">
       void SubmitBtn_Click(Object Sender, EventArgs e) 
       {
          Image1.Src="/images/" + Select1.Value;
       }
    </script>

</head>
<body>
   <h3>HtmlImage Sample</h3>
   <form id="Form1" runat="server">
      <img id="Image1" src="/images/cereal1.gif" runat="server" alt="Cereal bowl"/>
      <br />
      <br />
      Select an image file to display:
      <select id="Select1" runat="server">
         <option value="Cereal1.gif">Healthy Grains</option>
         <option value="Cereal2.gif">Corn Flake Cereal</option>
         <option value="Cereal3.gif">U.F.O.S</option>
         <option value="Cereal4.gif">Oatey O's</option>
         <option value="Cereal5.gif">Strike</option>
         <option value="Cereal7.gif">Fruity Pops</option>
       </select>
       <br />
       <br />
       <input id="Submit1" type="submit" runat="server" value="Apply"
              onserverclick="SubmitBtn_Click" />
   </form>
</body>
</html>

See Also

Reference

HtmlImage

Other Resources

HTML Server Controls