HighTechTalks DotNet Forums  

Re: Wrapping mouse over help icon up Web User Control

ASP.net Building Controls microsoft.public.dotnet.framework.aspnet.buildingcontrols


Discuss Re: Wrapping mouse over help icon up Web User Control in the ASP.net Building Controls forum.



Reply
 
Thread Tools Search this Thread Display Modes
  #1  
Old   
Michael Hamrah
 
Posts: n/a

Default Re: Wrapping mouse over help icon up Web User Control - 10-27-2006 , 01:04 PM






Hey Steve, check out the following code. I didn't use a template
control, but a CompositeControl instead. You can lookup the ITemplate
interface and the InstantiateIn method to figure out how to use it. It
would be cool to make the helptext layer a template to provide more
than just text for help.

Anyway, you can copy the following code into a new windows class
project and compile it into a dll. You can then use the following tag
to embedd the control in the page.

<cc1:Overlay runat="server" id="ov1" width="100px" Image="Lit.gif"
HelpImage="Normal.gif" HelpText="My Help Text" />

Here's the code:

/// <summary>
/// Michael Hamrah from Steve Barker
/// Sorry, it's not too pretty!
/// The following code shows
/// 1) Overriding the AddAttributesToRender method for doing
mouseovers
/// 2) Overriding the Render method to place controls next to
eachother
/// 3) Overriding the CreateChildControls method to add controls
during runtime
/// 4) Using the Page.ClientScript property to render Javascript
/// </summary>
public class Overlay : CompositeControl
{
private string _img = string.Empty;
private string _helpText = string.Empty;
private string _helpImg = string.Empty;

public Overlay()
{

}
protected override HtmlTextWriterTag TagKey
{
get
{
return HtmlTextWriterTag.Span;
}
}
public string HelpImage
{
get { return _helpImg; }
set { _helpImg = value; }
}
public string Image
{
get { return _img; }
set { _img = value; }
}
public string HelpText
{
get { return _helpText; }
set { _helpText = value; }
}
//add image to control
protected override void CreateChildControls()
{
Image img = new Image();
img.ID = "litImg";
img.ImageUrl = this.Image;
this.Controls.Add(img);

StringBuilder sb = new StringBuilder();
sb.Append("<script type=\"text/javascript\"> function
hideLayer(layer) { document.all[layer].style.visibility = \"hidden\"; }
function showLayer(layer) { document.all[layer].style.visibility =
\"visible\"; } </script>");


if(Page.ClientScript.IsClientScriptBlockRegistered ("helpJS") == false)

Page.ClientScript.RegisterClientScriptBlock(typeof (string), "helpJS",
sb.ToString());

if
(Page.ClientScript.IsStartupScriptRegistered(this. ClientID) == false)
Page.ClientScript.RegisterStartupScript(typeof(str ing),
this.ClientID, "<script type=\"text/javascript\">hideLayer('" +
this.ClientID + "x');</script>");

base.CreateChildControls();
}
//add attributes to span tag
protected override void AddAttributesToRender(HtmlTextWriter
writer)
{

StringBuilder sb = new StringBuilder();

sb.Append("showLayer('" + this.ClientID + "x')");
if (this.Image != string.Empty)
sb.Append(";" + this.ID + "_litImg.src='" + this.Image
+ "'");

sb.Append(";");
this.Attributes.Add("onmouseover", sb.ToString());

sb = new StringBuilder();
sb.Append("hideLayer('" + this.ClientID + "x')");
if(this.HelpImage != string.Empty)
sb.Append(";" + this.ID + "_litImg.src='" +
this.HelpImage + "'");

sb.Append(";");
this.Attributes.Add("onmouseout", sb.ToString());

base.AddAttributesToRender(writer);
}
//Need to add layer span tag after real span tag so override
this function.
protected override void Render(HtmlTextWriter writer)
{
base.Render(writer);

StringBuilder sb = new StringBuilder();
sb.Append("<script
type=\"text/javascript\">document.write(\"<span ");
sb.Append(" style=\\\"position:absolute;");
if (this.Width != 0)
sb.Append("width:" + this.Width + "\\\"");
sb.Append(" id=\\\"" + this.ClientID + "x\\\">");
sb.Append(this.HelpText);
sb.Append("</span>\");</script>");
writer.Write(sb.ToString());

}
}


Reply With Quote
Reply




Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off



Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.