Home > Getting Started > ASP.NET Syntax > ASP.NET Syntax for HTML Controls > HtmlInputImage
ASP.NET Syntax ASP.NET Syntax for HTML Controls
Creates a graphical submit button.
Declarative Syntax
<input type = image id="accessID" runat="server"
align = "imagealignment"
alt = "alttext"
onServerClick = "onServerClickHandler"
src = "imagepath"
width = "borderwidthinpixels"
>
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 HTML3.2-based browser clients.
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.
This sample illustrates use of the HtmlInputImage control.
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.
- The code for the form implements an HtmlForm, three HtmlInputImage controls, and a <
span 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 = "ImageButton1_Click" runat="server">
<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 = "ImageButton2_Click" runat="server">
<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 = "ImageButton3_Click" runat="server">
<p><span id="Message" 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 ImageButton1_Click ( object Source, ImageClickEventArgs e ) {
Message.InnerHtml = "You’re probably a down-to-earth person.";
}
void ImageButton2_Click ( object Source, ImageClickEventArgs e ) {
Message.InnerHtml = "Seems like you’d rather be in fiery Venus.";
}
void ImageButton3_Click ( object Source, ImageClickEventArgs e ) {
Message.InnerHtml = "Maybe you’re the type who’d prefer cooler Neptune.";
}
</script>
Web Forms Events and Handlers HtmlInputImage Class