Image Button Custom Control

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???

Who is Participating?
Jason ScolaroCommented:

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
osiris247Author Commented:
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.

osiris247Author Commented:
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.

osiris247Author Commented:

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.
osiris247Author Commented:
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!!!

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.