HtmlInputImage Control with MouseOver effect in ASP.NET
This article demonstrates you how to create onMouseOver effect on an image using html input tag in ASP.NET.
An HtmlInputImage control is used to create a graphical button. This article demonstrates you how to create onMouseOver effect on an image using html input tag in ASP.NET.
In the following example we are using four images on which you place your mouse over them and you see another image will appear. When creating an onMouseOver effect you will need special coding. This will be explained below.
Example
<html>
<head>
<title>ASP.NET Example</title>
<script language="VB" runat="server">
Sub Button1_Click(sender As Object, e As ImageClickEventArgs)
Span1.InnerHtml="You clicked button1"
End Sub
Sub Button2_Click(sender As Object, e As ImageClickEventArgs)
Span1.InnerHtml="You clicked button2"
End Sub
</script>
<style type="text/css">
#InputImage3
{
width: 131px;
z-index: 1;
left: 203px;
top: 77px;
position: absolute;
}
#InputImage4
{
position: absolute;
top: 254px;
left: 206px;
z-index: 1;
right: 439px;
}
.style1
{
border-style: ridge;
}
</style>
</head>
<body>
<h3 class="style1"><font face="Verdana" style="font-family: Verdana; font-size: medium">HtmlInputImage
Control with rollover effect</font></h3>
<p style="font-family: Verdana; font-size: small"> </p>
<form id="Form1" runat=server>
<input type=image id="InputImage1" src="basket1.jpg"
onmouseover="this.src='grapes.jpg';"
onmouseout="this.src='basket1.jpg';"
OnServerClick="Button1_Click"
runat="server"><input type=image id="InputImage3" src="basket3.jpg"
onmouseover="this.src='teddy.jpg';"
onmouseout="this.src='basket3.jpg';"
OnServerClick="Button2_Click"
runat="server">
<p>
<input type=image id="InputImage2" src="basket2.jpg"
onmouseover="this.src='bnana.jpg';"
onmouseout="this.src='basket2.jpg';"
OnServerClick="Button2_Click"
runat="server">
<input type=image id="InputImage4" src="basket4.jpg"
onmouseover="this.src='medicine.jpg';"
onmouseout="this.src='basket4.jpg';"
OnServerClick="Button2_Click"
runat="server"><p>
<p>
<p>
<span id=Span1 runat=server />
</form>
</body>
</html>
Output
Place your mouse over any image to see its change, here we place our mouse on the first bucket and you will see the image will change into another image as below.
I hope you will enjoy this.