DHTML PopUp for NS6 and IE5

[Total: 0    Average: 0/5]

This script shows how to have a DHTML box appear on a mouse over.

Head Code:

<SCRIPT TYPE="text/javascript"> 
Xoffset=-60; 
Yoffset= 20; 
var isIE=(document.all); 
var isNS4=document.layers?true:false; 
var isNS6=navigator.userAgent.indexOf("Gecko")!=-1?true:false;
/* old is set to be not IE, NS4 or NS6 */
var old = !(isIE||isNS4||isNS6); 
var yyy=+10;
var skn; /* holds the div/layer object */
function initPopup()
{
if(!old) 
{ 
  if(isNS4) skn=document.d11;
  else if(isNS6) skn=document.getElementById("d11");
  else if(isIE) skn=document.all.d11.style;
  if(isNS4)
    document.captureEvents(Event.MOUSEMOVE); 
  if(isNS6)
    document.addEventListener("mousemove", get_mouse, true);
  if(isNS4||isIE)
    document.onmousemove=get_mouse; 
} 
}
function popup(_m,_b) 
{ 
  var content ="<TABLE  WIDTH=130 BORDER=1 BORDERCOLOR=black CELLPADDING=2 CELLSPACING=0 "+"BGCOLOR="+_b+">";
      content+="<TD ALIGN=center><FONT COLOR=black SIZE=2>";
	  content+=_m;
	  content+="</FONT></TD></TABLE>"; 
  if(old) 
  { 
    alert(_m); 
    return; 
  } 
  else 
  { 
    yyy=Yoffset; 
    if(isNS4) 
    { 
      skn.document.open(); 
      skn.document.write(content); 
      skn.document.close(); 
      skn.visibility="visible"; 
    }  
    else if(isNS6)
    {
      skn.innerHTML=content;
      skn.style.visibility="visible";
    }
    else if(isIE) 
    { 
      document.all("d11").innerHTML=content; 
      skn.visibility="visible"; 
    } 
  } 
} 

function get_mouse(e) 
{ 
  var x=(isNS4||isNS6)?e.pageX:event.x+document.body.scrollLeft; 
  if(isNS4||isNS6) 
    var y=e.pageY; 
  if(isIE) 
  { 
    y=event.y; 
    if(navigator.appVersion.indexOf("MSIE 4")==-1) 
      y+=document.body.scrollTop; 
  } 
  if(isIE||isNS4)
  {
    skn.top=y+yyy; 
    skn.left=x+Xoffset; 
  }
  if(isNS6)
  {
    skn.style.top=y+yyy;
    skn.style.left=x+Xoffset; 
  }
} 


function removeBox() 
{ 
  if(!old) 
  { 
    yyy=-1000; 
    skn.visibility="hidden"; 
  } 
} 

function errorxxx(fld, msg) 
{ 
    if (eval("document.forms[0]."+fld+".value == 1"))
	{
      popup("<font color=yellow>"+msg+"</font>",'green'); 
	}
} 

</SCRIPT>

Init Code:

initPopup();

Body Code:

<DIV ID="d11" style="visibility:hidden;position:absolute;z-index:200">HELLO</DIV> 


Mouse over the text boxes and see an popup dhtml appear if the content of the form box is 1
(the number one). 
<form> 
<A HREF="#" ONMOUSEOVER="errorxxx('txt1', 'message1')" ONMOUSEOUT="removeBox()"> 
    <input type=text name=txt1> 
</A> 

<A HREF="#" ONMOUSEOVER="errorxxx('txt2', 'message2')" ONMOUSEOUT="removeBox()"> 
    <input type=text name=txt2> 
</A> 

</form> 
other stuff
<BR>
more stuff.....
Make sure your BODY TAG as this onload="initPopup()"

Times Viewed: 2

Leave a Reply

Your email address will not be published. Required fields are marked *