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.

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here