ARTICLE

HtmlInputImage Control with MouseOver effect in ASP.NET

Posted by Sapna in Articles | ASP.NET using VB.NET on January 31, 2011

Tags: ASP.NET, HtmlInputImage Control, MouseOver effect, HtmlInputImage Control with MouseOver effect

This article demonstrates you how to create onMouseOver effect on an image using html input tag in ASP.NET.

Tweet
1208
0

Reader Level: Beginner

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.