RolloverImageButton WebControl (emulates HTML IMG onMouseOver/onMouseOut)

Unlike HTML tags which support onMouseOver and onMouseOut, ASP.NET ImageButton’s do not.

I created a WebControl that overrides some of the default behaviors of the regular ImageButton mimicking the inline JavaScript functionality for onMouseOver and onMouseOut.

WebControl Code:  [RolloverImageButton.cs]

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Utilities.Common.WebControls.Buttons
/// <summary>
/// RolloverImageButton emulates the <img> equivelent of onMouseOver and onMouseOut
/// allowing image swapping.
/// </summary>
/// <usage>
/// Static Image:
///      ImageUrl="/global/utilities/lib/images/content/account/bills/pay/btn_PayNowAtBillMatrix.gif"
/// Rollover Image:
///      ImageOverURL="/global/utilities/lib/images/content/account/bills/pay/btn_PayNowAtBillMatrixRO.gif"
/// </usage>

[ToolboxData("<{0}:RolloverImageButton runat=server></{0}:RolloverImageButton>")]
public class RolloverImageButton : ImageButton

#region public virtual string ImageOverUrl
public virtual string ImageOverUrl
if (null == ViewState["ImageOverUrl"])
return string.Empty;
return Convert.ToString(ViewState["ImageOverUrl"]);

set { ViewState["ImageOverUrl"] = value; }


// Overridden Methods
#region protected override void AddAttributesToRender(HtmlTextWriter writer)
protected override void AddAttributesToRender(HtmlTextWriter writer)
writer.AddAttribute("onMouseOver", "this.src='" + base.ResolveClientUrl(ImageOverUrl) + "'");
writer.AddAttribute("onMouseOut", "this.src='" + base.ResolveClientUrl(ImageUrl) + "'");




<%@ Register TagPrefix=”XXXbuttons” Namespace=”Utilities.Common.WebControls.Buttons” Assembly=”Utilities.Common” %>


<XXXbuttons:RolloverImageButton ID=”BtnAccept” runat=”server” AlternateText=”Pay bill now at BillMatrix” ImageUrl=”/global/utilities/lib/images/content/account/bills/pay/btn_PayNowAtBillMatrix.gif” ImageOverURL=”/global/utilities/lib/images/content/account/bills/pay/btn_PayNowAtBillMatrixRO.gif” OnClick=”BtnAccept_Click” /> 


Pay Now At Bill Matrix Rollover

Pay Now At Bill Matrix


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s