Michael Hamrah
10/27/2006 5:04:00 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(string),
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());
}
}