HtmlInputImage Control
Creates a server-side control that maps to the <input type=image> HTML element and allows you to create an button that displays an image.
<input type=image
id="programmaticID"
src="imagepath"
align="imagealignment"
alt="alttext"
OnServerClick="onserverclickhandler"
width="borderwidthinpixels"
runat="server" >
Remarks
Use the HtmlInputImage control to program against the HTML <input type=image> element. You can use this control in conjunction with the HtmlInputText, HtmlTextArea, and other controls to construct user input forms. Because this control is the <input type=image> element that is run on the server, it offers the same button customization as HTML. This control offers an alternative for browsers that do not support DHTML and the HtmlButton control.
Note This control does not require a closing tag.
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.
Example
The following example compares a static image button control with an image button control that uses the DHTML onMouseOver event (which displays the image of a banana) and the onMouseOut event (which displays the original mango image). Both image buttons include an OnServerClick event handler.
<%@ Page Language="VB" AutoEventWireup="True" %>
<html>
<head>
<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 runat="server">
<input type=image
id="InputImage1"
src="/images/mango.jpg"
OnServerClick="Button1_Click"
runat="server">
<p>
<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">
With rollover effect (HTML 4.0)
<p>
<span id=Span1 runat="server" />
</form>
</body>
</html>
[C#]
<%@ Page Language="C#" AutoEventWireup="True" %>
<html>
<head>
<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 runat="server">
<input type=image
id="InputImage1"
src="/images/mango.jpg"
OnServerClick="Button1_Click"
runat="server">
<p>
<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">
With rollover effect (HTML 4.0)
<p>
<span id=Span1 runat="server" />
</form>
</body>
</html>