Detail Box Pops Up

[Total: 0    Average: 0/5]

This shows how to have a box pop up when you mouse over a given area on the page.

Head Code:

<STYLE TYPE="text/css">

.D11
  {
   POSITION:absolute;
   VISIBILITY:hidden;
   Z-INDEX:200;
  }
</STYLE>
<SCRIPT TYPE="text/javascript">
Xoffset=-60;
Yoffset= 20;
var isNS4=document.layers?true:false;
var isIE=document.all?true:false;
var isNS6=!isIE&&document.getElementById?true:false;
var old=!isNS4&&!isNS6&&!isIE;

var skn;
function initThis()
{
  if(isNS4)skn=document.d11;
  if(isIE)skn=document.all.d11.style;
  if(isNS6)skn=document.getElementById("d11").style;
}




function popup(_m,_b)
{
  var content="<TABLE  WIDTH=130 BORDER=1 BORDERCOLOR=black CELLPADDING=2 CELLSPACING=0 "+"BGCOLOR="+_b+"><TD ALIGN=center><FONT COLOR=black SIZE=2>"+_m+"</FONT></TD></TABLE>";
  if(old)
  {
    alert("You have an old web browser:n"+_m);
	return;
  }
  else
  {
	if(isNS4)
	{
	  skn.document.open();
	  skn.document.write(content);
	  skn.document.close();
	  skn.visibility="visible";
	}
	if(isNS6)
	{
	  document.getElementById("d11").style.position="absolute";
	  document.getElementById("d11").style.left=x;
	  document.getElementById("d11").style.top=y;
	  document.getElementById("d11").innerHTML=content;
	  skn.visibility="visible";
	}
	if(isIE)
	{
	  document.all("d11").innerHTML=content;
	  skn.visibility="visible";
	}
  }
}

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


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


if(isNS4)
  document.captureEvents(Event.MOUSEMOVE); 
if(isNS6)
  document.addEventListener("mousemove", get_mouse, true);
if(isNS4||isIE)
  document.onmousemove=get_mouse;

</SCRIPT>

Body Code:

<DIV ID="d11" CLASS="d11"></DIV>

<TABLE BORDER=0 CELLPADDING=40 CELLSPACING=0 SUMMARY="holder">
  <TR>
    <TD ALIGN="center"><A HREF="#" ONMOUSEOVER="popup('<font color=yellow>Text Inside PopUp</font>','green')"
	                               ONMOUSEOUT="removeBox()">Something of interest</A></TD>
  </TR>
</TABLE>
<script>
initThis();
</script>

Times Viewed: 1

Leave a Reply

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