Image Button Custom Control

Posted on 2006-06-05
Medium Priority
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
  • 4

Author Comment

ID: 16840551
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

Jason Scolaro earned 1500 total points
ID: 16843725

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

Author Comment

ID: 16845660
Hi Jason

Thanks for coming in......

I have made some good head way on encapsulating the propload script in my control....to 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.


Author Comment

ID: 16850343

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.

Author Comment

ID: 16859765
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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In .NET 2.0, Microsoft introduced the Web Site.  This was the default way to create a web Project in Visual Studio 2005.  In Visual Studio 2008, the Web Application has been restored as the default web Project in Visual Studio/.NET 3.x The Web Si…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
this video summaries big data hadoop online training demo (http://onlineitguru.com/big-data-hadoop-online-training-placement.html) , and covers basics in big data hadoop .
Integration Management Part 2
Suggested Courses
Course of the Month14 days, 22 hours left to enroll

840 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