Introduction
This article creates a helping window that provides the user with a brief explanation or description for a particular element or state in the application.
This will allow a user to simply move their mouse over a particular user interface element to learn about its purpose or functionality.
First we create a .net application (In this article say Helping Window)
Code for mouse.aspx page
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<script>
function showHelpFloatWindow(windowID, obj, horizPadding, vertPadding, goRight)
{
var w = document.getElementById(windowID);
if (w != null)
{
w.style.display = 'block';
w.style.visibility = 'visible';
w.style.top = getAscendingTops(obj) + vertPadding;
(getAscendingTops(obj) + vertPadding < 0) w.style.top = 0;
w.style.left = getAscendingLefts(obj) + obj.offsetWidth;
else
{
w.style.left = getAscendingLefts(obj) - horizPadding;
if ((getAscendingLefts(obj) - horizPadding) < 0) w.style.left =
getAscendingLefts (obj) + obj.offsetWidth + horizPadding;
}
}
}
function hideHelpFloatWindow(windowID)
{
var w = document.getElementById(windowID);
if (w != null)
{
w.style.display = 'none';
w.style.visibility = 'hidden';
w.top = -999;
w.left = -999;
}
}
function getAscendingLefts(elem)
{
if (elem==null)
return 0;
else
return elem.offsetLeft+getAscendingLefts(elem.offsetParent);
}
function getAscendingTops(elem)
{
if (elem==null)
return 0;
else
return elem.offsetTop+getAscendingTops(elem.offsetParent);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Helping Window</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<span onmouseover ="showHelpFloatWindow('ASPX 1',this,10,20,true);"onmouseout = "hideHelpFloatWindow('ASPX 1');"
style="font-size: 15px; color: Green ; font-family: Verdana; text-decoration: underline;">
<code >HELP 1.aspx</code>
</span>
<span onmouseover="showHelpFloatWindow('ASPX 2',this,310,20,false);"onmouseout ="hideHelpFloatWindow('ASPX 2');"
style="font-size: 15px; color: fuchsia; font-family: Verdana; text-decoration: underline;">
<code>HELP 2.aspx</code>
</span>
</div>
<div id ="ASPX 1" class ="helpwindow">
<iframe frameborder ="0" height ="100%"
src="HELP 1.aspx" style="width: 940px" ></iframe>
</div>
<div id ="ASPX 2" class ="helpwindow">
<iframe frameborder ="0" height ="100%"
src="HELP 2.aspx" style="width: 941px" ></iframe>
</div>
</form>
</body>
</html>
Code for Help1.aspx page
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="HELP 1.aspx.cs" Inherits="help1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1 style="color: purple; text-decoration: underline" >I am here to help you<br />
<asp:Image ID="Image1" runat="server" ImageUrl="~/image/bonsai.jpg" />
</h1>
</div>
</form>
</body>
</html>
Code for Help2.aspx page
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="HELP 2.aspx.cs" Inherits="help2" %>
<!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 style="width: 100%; height: 100%; color: #000000; background-color: #000000;">
<asp:Image ID="Image1" runat="server" ImageUrl="~/image/dog.gif" /><br />
<h1 style="color: #00ffff" >What you are looking for?</h1>
</div>
</form>
</body>
</html>
Now when you run the application and drag your mouse over the HELP 1.aspx icon, you got the following window:
When you move your mouse over the HELP 2.aspx icon, you got the window shown below
