Image Button Custom Control

Posted on 2006-06-05
Last Modified: 2012-06-27
Hi All

2 part question -
working with dot net 2.0 C#.
I have a custom control, i am inheriting from the ImageButton class just to add some simple functionality to it.

1.  What code is required to add the file browser at design time?  I have had a look round the web but no examples to the trick.
2.  I am trying to add mouseover effect for the button, this is fine i have added the attributes to the button but i want to preload the images with js and use them.....I have this code but it doesnt work.
StringBuilder sb = new StringBuilder();
sb.Append("if(document.images) { \n");
sb.Append(this.ClientID.Replace('_', '$') + " = new Image(); \n");
sb.AppendFormat(this.ClientID.Replace('_', '$') + ".src = \"{0}\";\n", (sOvrUrl == null ? "" : sOvrUrl)); // sOvrUrl is a string property
sb.Append(" } \n \n");

this.Page.ClientScript.RegisterClientScriptBlock(this.GetType(), sKey, sb.ToString(), true); //sKey is a string property.

-------// add the attribute
this.Attributes.Add("onMouseOver", string.Concat(this.ClientID.Replace('_', '$') + ".src = '" + sOvrUrl + "';", "window.status='", EscapeJavaScript(_StatusBarText) + "';"));

if i change to this.src it works fine but of course that is not using the preloaded image.  I have added the Replace as the name attribute has $ not _

Any ideas on either???

Question by:osiris247
    LVL 7

    Author Comment

    I have part solved the designed support for the URL, i have added this.....
    EditorAttribute(typeof(System.Web.UI.Design.ImageUrlEditor), typeof(System.Drawing.Design.UITypeEditor))

    which adds the ellipses to the design view properties window but i dont have the pick url prompt in source view.

    Still no further with the preloading images with js.

    LVL 22

    Accepted Solution


    It might help to see what the rendered JavaScript looks like also.  Could you paste the "View Source" for the preload image section and the onMouseOver?

    My thought though is that the RegisterClientScriptBlock isn't putting your JavaScript code into the <head> section, which is where preloaded images need to be put.  Unfortunately RegisterClientScriptBlock puts the code within the <body> section right after the <form>, I believe.  So we need another solution, potentially....

    In .NET 2.0 there might be a better method (I'm sure there is), but I found this pretty quickly.  I'll keep fishing for more...

    Good luck!  Hope that helps a little...
    -- Jason
    LVL 7

    Author Comment

    Hi Jason

    Thanks for coming in......

    I have made some good head way on encapsulating the propload script in my be honest i thought i had cracked it until you said that to preload the images the js must be in the head tag.

    I have left my source at work so i will post it tomo morning (uk time).

    I'll take a look through that page and see whats going on.

    LVL 7

    Author Comment


    This is the code in my control that builds the js.
    StringBuilder sb = new StringBuilder();
                sb.Append("if(document.images) { \n");
                sb.Append(this.ClientID + "_std = new Image(); \n");
                sb.Append(this.ClientID + "_ovr = new Image(); \n");
                sb.AppendFormat(this.ClientID + "_std.src = \"{0}\";\n", (sStdUrl == null ? "" : sStdUrl));
                sb.AppendFormat(this.ClientID + "_ovr.src = \"{0}\";\n", (sOvrUrl == null ? "" : sOvrUrl));
                sb.Append(" } \n \n");

                this.Page.ClientScript.RegisterClientScriptBlock(this.GetType(), this.ClientID + "_preloadimages", sb.ToString(), true);

    this is the html that the control generates....the js is inline, not in the head tags.
    function imagebutton_swap(imgName, imgUrl) {
    if (document.images && typeof imgUrl != 'undefined') {
      var oEle;
      oEle = document.getElementById(imgName);
      oEle.src = imgUrl.src;

    if(document.images) {
    ctl00_Header1_btnHelp_std = new Image();
    ctl00_Header1_btnHelp_ovr = new Image();
    ctl00_Header1_btnHelp_std.src = "gfx/help_std.jpg";
    ctl00_Header1_btnHelp_ovr.src = "gfx/help_ovr.jpg";

    <input type="image" name="ctl00$Header1$btnBack" id="ctl00_Header1_btnBack" ScriptKey="btnBack"
    onMouseOver="imagebutton_swap('ctl00$Header1$btnBack', ctl00_Header1_btnBack_ovr);window.status='Go Back to previous page';" onMouseOut="imagebutton_swap('ctl00$Header1$btnBack', ctl00_Header1_btnBack_std);javascript:window.status='';return true;" src="gfx/back_std.jpg" onclick="history.go(-1);history.back(); return false;" style="border-width:0px;" />

    In 2.0 there is the htmlhead class....(Page.Header), just not sure how i can insert js into the tag.

    Any ideas.
    LVL 7

    Author Comment

    got it sussed, with a push from the codeproject article.....only i encapsulated the required literal control into my custom control as well.
    Basically added the control at runtime to the htmlhead and chucked the preload script string at it.

    Overall very pleased......surprised such a simple thing as extending the image button with rollover effect caused me such problems and nothing around the web seemed to jump out at me.

    Anyway, thanks for the pointer Jason.

    Speak again soon no doubt!!!


    Featured Post

    Live: Real-Time Solutions, Start Here

    Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

    Join & Write a Comment

    In an ASP.NET application, I faced some technical problems. In this article, I list them out and show the solutions that I found.  I hope it will be useful. Problem: After closing a pop-up window, the parent page should be refreshed automaticall…
    It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
    how to add IIS SMTP to handle application/Scanner relays into office 365.
    This video gives you a great overview about bandwidth monitoring with SNMP and WMI with our network monitoring solution PRTG Network Monitor ( If you're looking for how to monitor bandwidth using netflow or packet s…

    754 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    19 Experts available now in Live!

    Get 1:1 Help Now