HtmlInputImage Control Syntax

asp.net.ph

Home > Getting Started > ASP.NET Syntax > ASP.NET Syntax for HTML Controls > HtmlInputImage

HtmlInputImage Class Input Image Element

Creates a graphical submit button.

Declarative Syntax

<input type=image id="accessID" runat="server"
   align = "imagealignment"
   alt = "alttext"
   border = "borderwidthinpixels" 
   src = "imagepath"
   onServerClick = "onServerClickHandler"
>

For information on the individual members of this class, see HtmlInputImage in the class library.

This control does not require a closing tag.

An HtmlInputImage control is used to create a graphical button.

It is functionally similar to an HtmlButton control, but is supported in all downlevel browsers.

The HtmlInputImage control enables programming of the HTML <input type=image> element.

This control is typically used in conjunction with other user input controls. The control offers the same button customization as in HTML.

One of the advantages of HTML controls over Web controls is that server-side events do not conflict with events that occur on the client, unless the server and client code themselves countermand each other.

This being the case, you can use Dynamic HTML ( DHTML ) events to modify the appearance of any image that you include on your Web Forms page.

The following example includes three image button controls that use the DHTML onMouseOver and onMouseOut events to simply change and restore the border style of each.

The image buttons also include an onServerClick handler, which we use here simply to display a message for each button.

Using Dynamic HTML Events with the HtmlInputImage Control

Run Sample | View Source

The code for the form implements an HtmlForm, three HtmlInputImage controls, and a <p runat="server"> control.

<form runat="server">
<div align="center">
   <input type=image id="InputImage1" 
      src="/asp.net.ph/shared/images/earth.gif" style="border:thick white ridge"
      onMouseOver="this.style.border='thick green groove';"
      onMouseOut="this.style.border='thick white ridge';" 
      onServerClick="saySomething" runat="server">

   &nbsp;
   <input type=image id="InputImage2" 
      src="/asp.net.ph/shared/images/venglobe.gif" style="border:thick white ridge"
      onMouseOver="this.style.border='thick green groove';"
      onMouseOut="this.style.border='thick white ridge';" 
      onServerClick="saySomething" runat="server">

   &nbsp;
   <input type=image id="InputImage3" 
      src="/asp.net.ph/shared/images/nepglobe.gif" style="border:thick white ridge"
      onMouseOver="this.style.border='thick green groove';"
      onMouseOut="this.style.border='thick white ridge';" 
      onServerClick="saySomething" runat="server">

   <p id="msg" runat="server">Where do you want to go today?</span>
</div>
</form>

In the <head> of the Web Forms page, define the image buttons’ click event handlers.

<script language="C#" runat="server">
   void saySomething ( object src, ImageClickEventArgs e ) {
      switch ( ( ( HtmlInputImage ) src ).ID ) {
      case "InputImage1" :
         msg.InnerHtml = "You’re probably a down-to-earth person.";
         break;
      case "InputImage2" :
         msg.InnerHtml = "Seems like you’d rather be in fiery Venus.";
         break;
      case "InputImage3" :
         msg.InnerHtml = "Maybe you’re the type who’d prefer cooler Neptune.";
         break;
      }
   }
</script>

HtmlInputImage Class Input Image Element Web Forms Events and Handlers

Suggested Reading

© 2025 Reynald Nuñez and asp.net.ph. All rights reserved.

If you have any question, comment or suggestion
about this site, please send us a note