I'm trying to create a custom js object to display help text when you
move the mouse over controls on a form. I've got two issues that are
troubling:
1) The 'color' and 'backgroundColor' properties only have values
immediately after you set them. Trying to access them from within the
object later with this.color yields "undefined"
2) Having trouble with the syntax for addEventListener. Can't get
that to work in IE6 so I'm currently overwriting any preexisting
'onmouseover' events.
Any ideas on how to get either of these to work?
Thanks,
Jesse
<html>
<head>
<meta name="vs_targetSchema"
content="http://schemas.microsoft.com/intellisense/ie5">
<TITLE></TITLE>
<STYLE>
BODY{ margin:.5em; font-family:sans-serif}
DIV{ margin:0px; padding:.5em; height:3em; width:50%;
float:left; }
H6{ margin:0px; }
INPUT{ width:100% }
</STYLE>
<script>
function HelpText(color, bgColor){
var _lastEl;
this.color=color;
this.backgroundColor=bgColor;
this.doMouseOver=
function(){
//Exit if the pointer is over the same control
el=window.event.srcElement;
if(el == _lastEl) return false;
_lastEl=el;
//Get the div above this control
while(el.tagName != "DIV" && el.tagName != "BODY"){
el=el.parentNode;
}
if(el.help && el.help.length != 0){
dvHelp.innerHTML=el.help;
dvHelp.style.display="inline";
dvHelp.style.color=this.color;
dvHelp.style.backgroundColor=this.backgroundColor;
window.status = this.backgroundColor;
}
}
this.doMouseOut=
function(){
dvHelp.innerHTML="";
dvHelp.style.display="none";
}
dvHelp=document.createElement("DIV")
dvHelp.style.display="none";
window.document.body.appendChild(dvHelp);
window.document.body.onmouseover=this.doMouseOver;
window.document.body.onmouseout=this.doMouseOut;
//window.document.addEventListener("onmouseout",
this.doMouseOut, false);
}
</script>
</head>
<BODY onload="var oHelp=new HelpText('black','yellow');">
<DIV help="First name of customer as it appears on credit card">
<H6>First Name</H6>
<INPUT type="text" ID="Text1" NAME="Text1">
</DIV>
<DIV help="Last name of customer as it appears on credit card">
<H6>Last Name</H6>
<INPUT type="text" ID="Text2" NAME="Text2">
</DIV>
<DIV help="Preferred shackle chain color">
<H6>Chain Color</H6>
<INPUT type="text" ID="Text3" NAME="Text3">
</DIV>
<DIV help="Name of customer's fantasy alter ego">
<H6>Alter Ego</H6>
<INPUT type="text" ID="Text4" NAME="Text4">
</DIV>
</BODY>
</html>
