C# ASP.NET Server Control: Rollover Image Button

If you are working on a web project where there are a lot of image buttons that need to have rollover functionality you can extend the ImageButton control as demonstrated below. It takes less than 30 lines of code, but it makes a project much easier to maintain because the code for the rollovers is implemented in one place instead of in each seperate page so you don't have to dig through html to manage your rollovers.

I hope you find this helpful.

Until next time,
Happy coding

using System;

using System.Collections.Generic;

using System.ComponentModel;

using System.Text;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

 

namespace MyControls

{

    [DefaultProperty("Text")]

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

    public class RolloverImageButton : ImageButton

    {

        [DefaultValue("")]

        [UrlProperty]

        [Bindable(true)]

        public virtual string ImageOverUrl

        {

            get

            {

                if (null == ViewState["ImageOverUrl"]) return string.Empty;

                else return Convert.ToString(ViewState["ImageOverUrl"]);

            }

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

        }

 

        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);

        } 

    } 

}   


Similar Articles