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.
  • 1889

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">&nbsp;</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">&nbsp;&nbsp;&nbsp;
         <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>
            &nbsp;<p>
            &nbsp;&nbsp;<p> 
        <span id=Span1 runat=server />
     </form>
 
</body>
</
html>

Output
rollover1.gif

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.
rollover2.gif

I hope you will enjoy this.

Categories

More Articles

© 2019 DotNetHeaven. All rights reserved.