Highlight Button Image When Mouse Hovers Over It In ASP.Net

The purpose of this article is to provide a way in ASP.NET to change the image of a button as soon as the user hovers over it. We assume that you have created a Web site with Visual Studio and added a new page CsharpPage.aspx using the Web Form template.

Introduction

With Visual Studio, you can easily create image buttons called ImageButton.

They appear in the source code in the form:

<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/csharpcorner.png" OnClick="ImageButton1_Click" />

In ASP.NET, cannot intercept an onmouseover event directing on a method of the code behind.

The only way to intercept a mouseover event type is to use the CSS stylesheet with the hover property or JavaScript event handler onmouseover, onmouseout, onmousemove.

We will focus more particularly on the event handlers onmouseover and onmouseout.

Modifying the attributes

Look at the following HTML button:

<input type="image" src="images/imag.png" onmouseover="this.src='images/imagover.png';" onmouseout="this.src='images/imagout.png';">

onmouseover and onmouseout are attributes of the input object and followed by instructions to execute when an event occurs.

In the example, the instruction:

this.src='images/imagover.png';

Replaces the image of the button with a new image.

Initially, this button appears with the image imag.png on the page and when the mouse hovers over this image, the image imagover.png is replaced and finally when the mouse exits the image imagover.png, the image imagout.png takes its place.

It is possible to do it in ASP.Net, as in this line of code:

<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="images/imag.png" OnMouseOver="this.src='images/imagover.png'" OnMouseOut="this.src='images/imagout.png'" />

But in design mode if you double-click the button to handle the click event, some of these properties may disappear. This trick seems not to be compatible with the object editor. Let mixtures of ASP.Net and JavaScript.

In ASP.NET, the class WebControl represents all controls and allows the addition of attributes.

Here is an example

ImageButton1.Attributes.Add("onmouseover", "this.src=\"imagover.png\"");

This instruction must be executed when the page loads and is usually placed in the code behind in the method Page_Load.

After running this command the following button:

<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/imag.png" />

Will become in the HTML page:

<img id="ImageButton1" onmouseover="this.src="imagover.png"" src="imag.png" />

Automation

If we have several image buttons on a page, it becomes fast binding to add in the code behind additional instructions. We will use the tag <%# code %> that can execute code to the .aspx page loading. To easily add a mouseover event handler to an object of a given id, we will declare the following function in the code behind.

protected string MouseOver(string s_id, string s_image_over)
{
   string javascript_onmouseover = "this.src=\"{0}\"";
   WebControl wc = (WebControl)FindControl(s_id);
   wc.Attributes.Add("onmouseover", string.Format(javascript_onmouseover, s_image_over));
   return "";
}

So it does the bindings to the loading of the page. Do not forget to put the instruction Page.DataBind(); in the method Page_Load. Now you can change the image associated with onmouseover directly in the .aspx page using the tag <%# %>.

<%# MouseOver("ImageButton1","imageover.png") %>

Example

Here's what to do:

1. Put the instruction Page.DataBind(); in the method Page_Load (for data binding expression <%# … %>).
   
   
2. Create this new method in your .aspx.cs page.
   

   protected string MouseOverOut(string s_id, string s_image_out, string s_image_over)
   {
      string javascript_onmouseout = "this.src=\"{0}\"";
      string javascript_onmouseover = "this.src=\"{0}\"";
      WebControl wc = (WebControl)FindControl(s_id);
      wc.Attributes.Add("onmouseover", string.Format(javascript_onmouseover, s_image_over));
      wc.Attributes.Add("onmouseout", string.Format(javascript_onmouseout, s_image_out));
      return "";
   }

3. Download the following two images:
   
   
   
   And name them csharpcorner.png and csharpcornerlight.png.
   
   
4. In the .aspx page, put:
   

   <asp:ImageButton ID="ImageButtonCsharpCorner" runat="server" ImageUrl="~/csharpcorner.png" />
   <%# MouseOverOut("ImageButtonCsharpCorner","csharpcorner.png", "csharpcornerlight.png") %>

   This command MouseOverOut searches for the object whose ID is ImageButtonCsharpCorner and adds the properties onmouseover and onmouseout to the event-handling instructions.
   
   So that the button returns to its original appearance, you should of course use the same base image that is used when the mouse leaves.
   
   To have a highlight effect, just create the imagover.png brighter than imagout.png.
   
   Note that this function also applies to ASP images:
   

   <asp:Image ID="Image1" runat="server" ImageUrl="~/f32.png" />
   <%# MouseOverOut("Image1","csharpcorner.png", "csharpcornerlight.png") %>

However if you directly insert a HTML image then this function will result in an error.