S
steve_barker333
Hi guys!
I have some pretty neat code that shows a floating help box over the
top of an ASP.NET screen when an image is mouse-overed.
I've included the code for this at the end of this post...
I was wondering if there'd be any way to wrap this all up as an ASP.NET
Web User Control that can be placed on a Web Form. The control would
take care of making sure all the JavaScript is registered etc... I
envisage that it would have the following properties:
NormalImageUrl
MouseOverUrl
HelpText
HelpStyle
HelpClass
HelpWidth
HelpHeight
etc...
I can see how most of this code would be written, apart from where
changes are required to the Java Script section. If the user set
HelpWidth to be 200px say, how would I replace the 100px currently set
with 200px? Is it possible to do a find and replace on the text an
ASP.NET control renders just before it is written to the page?
Any help would be gratefully received, and if I get the control
working, I'll post it for others to use too.
Many thanks,
Steve.
=====================================
Code:
=====================================
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="Default4.aspx.cs" Inherits="Default4" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<span onmouseover="showlayer('spanHelp');imgHelp.src='Lit.gif';"
onmouseout="hidelayer('spanHelp');imgHelp.src='Normal.gif';"><img
src="Normal.gif" id="imgHelp" alt=""/></span>
<script type="text/javascript">
//Decision Objectives layer
document.write("<span style=\"position: absolute;width:100px\"
id=\"spanHelp\">Here is some useful help text!</span>");
</script>
</div>
</form>
</body>
</html>
<script type="text/javascript">
hidelayer('spanHelp') ;
//hide the layers to start with
function hidelayer(layer)
{
document.all[layer].style.visibility = "hidden";
}
function showlayer(layer)
{
document.all[layer].style.visibility = "visible";
}
</script>
I have some pretty neat code that shows a floating help box over the
top of an ASP.NET screen when an image is mouse-overed.
I've included the code for this at the end of this post...
I was wondering if there'd be any way to wrap this all up as an ASP.NET
Web User Control that can be placed on a Web Form. The control would
take care of making sure all the JavaScript is registered etc... I
envisage that it would have the following properties:
NormalImageUrl
MouseOverUrl
HelpText
HelpStyle
HelpClass
HelpWidth
HelpHeight
etc...
I can see how most of this code would be written, apart from where
changes are required to the Java Script section. If the user set
HelpWidth to be 200px say, how would I replace the 100px currently set
with 200px? Is it possible to do a find and replace on the text an
ASP.NET control renders just before it is written to the page?
Any help would be gratefully received, and if I get the control
working, I'll post it for others to use too.
Many thanks,
Steve.
=====================================
Code:
=====================================
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="Default4.aspx.cs" Inherits="Default4" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<span onmouseover="showlayer('spanHelp');imgHelp.src='Lit.gif';"
onmouseout="hidelayer('spanHelp');imgHelp.src='Normal.gif';"><img
src="Normal.gif" id="imgHelp" alt=""/></span>
<script type="text/javascript">
//Decision Objectives layer
document.write("<span style=\"position: absolute;width:100px\"
id=\"spanHelp\">Here is some useful help text!</span>");
</script>
</div>
</form>
</body>
</html>
<script type="text/javascript">
hidelayer('spanHelp') ;
//hide the layers to start with
function hidelayer(layer)
{
document.all[layer].style.visibility = "hidden";
}
function showlayer(layer)
{
document.all[layer].style.visibility = "visible";
}
</script>