ExtendedImageButton: Image button with extended functionality including - JavaScript rollovers, confirmation pop-up box, disabled state and alt tags

• Download source files - 9.37 Kb
• Download demo project - 17.2 Kb

Introduction

I built this control to make my life easier. It seamed like I was always creating roll-over images and buttons with confirm pop-up. I finally got sick of dealing with all the JavaScript snippets. This control is a solution to all my problems. (and hopefully yours;).)

Special note: Thanks to the following two articles on CodeProject. They helped me a lot. (plus I sampled parts of my JavaScript from them.)

• HTML Wait-Confirm Button Server Control - By Michael Griffith.
• Cliche RollOvers - By Jason McBurney.

Using the code

The following is an example of the code needed to use the control. First reference the CustomControls.dll, then add it to your Toolbox. Next drag a new instance of the ExtendedImageButton control onto the page and then set the properties/events you might need.

protected CustomControls.ExtendedImageButton eibPostBack;
private void Page_Load(object sender, System.EventArgs e) {
    this.eibPostBack.ButtonClick += 
          new System.EventHandler(this.eibPostBack_ButtonClick);
}
private void eibPostBack_ButtonClick(object sender, System.EventArgs e){
    Response.Write("Button Was Clicked");
}

ExtendedImageButtonControl

This is the main code of the control. The Render method is overridden. The code creates an [<A>] tag that is wrapped around an [<img>]tag. The JavaScript necessary for this is added in another method that we'll review in a minute:

protected override void Render(HtmlTextWriter output) {
    if (this.Enabled){
        output.WriteBeginTag("A");
        if (_redirectURL != String.Empty)
            output.WriteAttribute("href", _redirectURL);
        else 
            output.WriteAttribute("href", "javascript:" + 
               this.Page.GetPostBackEventReference(this, "ButtonClick"));
        if (_confirmClick)
            output.WriteAttribute("onclick", 
                      "javascript:return __doConfirm(this);");
        output.Write(">");
    }

    output.WriteBeginTag("img");
    if ((!this.Enabled) && (_imageDisabled != String.Empty)){
        output.WriteAttribute("src", _imageDisabled);
    }else{
        output.WriteAttribute("src", _imageNormal);
    }
    output.WriteAttribute("name", this.UniqueID);

    if (! this.BorderWidth.IsEmpty)
        output.WriteAttribute("border", this.BorderWidth.ToString());
    else
        output.WriteAttribute("border", "0");
    if (! this.BorderColor.IsEmpty)
        output.WriteAttribute("bordercolor", 
                            this.BorderColor.ToArgb().ToString());
    if (this.Style.Count > 0) {
    IEnumerator keys = this.Style.Keys.GetEnumerator();
        string sStyles="";
        while (keys.MoveNext()) {
            sStyles += (string)keys.Current + ":" + 
               this.Style[(string)keys.Current ].ToString() + ";";
        }
        output.WriteAttribute("style", sStyles);
    }
    if (this.CssClass != String.Empty)
        output.WriteAttribute("class", this.CssClass);
    if (! this.Height.IsEmpty)
        output.WriteAttribute("Height", this.Height.ToString());
    if (! this.Width.IsEmpty)
        output.WriteAttribute("Width", this.Width.ToString());
    if (this._allText != String.Empty)
        output.WriteAttribute("alt", _allText);
    if (this.Enabled){
        if (this._imageOnMouseOver != String.Empty)
            output.WriteAttribute("OnMouseOver", "javascript:newRollOver('" + 
               this.UniqueID + "', '" + ImageOnMouseOver + "')");
        if (this._imageNormal != String.Empty)
            output.WriteAttribute("OnMouseOut", "javascript:newRollOver('" + 
               this.UniqueID + "', '" + ImageNormal + "')");
        if (this._imageOnMouseClick != String.Empty)
            output.WriteAttribute("OnMouseDown", "javascript:newRollOver('" + 
               this.UniqueID + "', '" + ImageOnMouseClick + "')");
    }
    output.Write("/>");

    if (this.Enabled){
        output.WriteEndTag("A");
    }
}

The OnInit method is overridden. This method adds the necessary JavaScript methods to the page:

protected override void OnInit(EventArgs e){
    const string RegistrationNameImageSwap = 
                                      "ExtendedImageButton_JSwap";
    const string RegistrationNameConfirmMessage = 
                                     "ExtendedImageButton_JConfirm";
    if (!this.Page.IsClientScriptBlockRegistered(RegistrationNameImageSwap)){
        const string sJSwapCode = 
            "<script language='javascript' type='text/javascript'>" +
            "<!-- \n" + 
            "function newRollOver(targetDOMUrlName, URL) { \n" + 
            "//alert(targetDOMUrlName + ' ' + URL); \n " + 
            "var img=document.images; \n " + 
            "var i=0; \n " + 
            "for (i=0; i<img.length; i++) \n " + 
            "if (img[i].name == targetDOMUrlName) img[i].src = URL; \n " + 
            "} \n " + 
            "//-->\n " + 
            "</script>\n ";
        this.Page.RegisterClientScriptBlock(RegistrationNameImageSwap,
                                                             sJSwapCode);
    }
    
    if (_confirmClick) {
       if (! this.Page.IsClientScriptBlockRegistered(
                                            RegistrationNameConfirmMessage))
       {
          string sJSConfirmCode = 
                "<script language='javascript' type='text/javascript'>" +
                "<!-- \n" +
                "function __doConfirm(btnWaiter) { \n" +
                "if (confirm('" + _confirmMessage + "')) { \n" +
                "document.body.style.cursor=\"wait\"; \n" +
                "return true; \n" +
                "} return false; } \n" +
                "//--> \n" +
                "</script> \n";
          this.Page.RegisterClientScriptBlock(RegistrationNameConfirmMessage,
                                                              sJSConfirmCode);
       }
    }
}

Future plans

More robustness.

History

• Version 1.0, May 2005.