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>

[DefaultProperty("ImageUrl")]
[ToolboxData("<{0}:RolloverImageButton runat=server></{0}:RolloverImageButton>")]
public class RolloverImageButton : ImageButton
{
[Bindable(true)]
[Category("Appearance")]
[DefaultValue("")]
[Localizable(true)]

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

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

}
#endregion

// 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) + "'");

base.AddAttributesToRender(writer);
}
#endregion

}
}

Directive:


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

Implementation:


<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” /> 

Result:

Pay Now At Bill Matrix Rollover

Pay Now At Bill Matrix

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s