Area sensitive help

This article tells you how to create a help window which appears when your mouse moves on a particular web page area.


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