Menu-DHTML POPUP

[Total: 0    Average: 0/5]

This shows how to have a DHTML box appear over a href.

Head Code:

<STYLE TYPE="text/css">
.lauren {position:absolute;top:100;left:100;width:30;height:21;}
.mike {position:absolute;top:120;left:100;width:30;height:21;}
.menudiv{position:absolute;top:80;left:60;width:160;height:106;color:steelblue;background-color:white;border:solid;border-width:2;border-color:steelblue;z-index:10;visibility:hidden;}
.menudiv2{position:absolute;top:90;left:60;width:160;height:106;color:steelblue;background-color:white;border:solid;border-width:2;border-color:steelblue;z-index:10;visibility:hidden;}
</STYLE>

Body Code:

<DIV CLASS="lauren">
<A HREF="#" ONMOUSEOVER="menu(1,1)">Organizations</A>
</DIV>
<DIV CLASS="mike">
<A HREF="#" ONMOUSEOVER="menu(2,1)"><nobr>Mike Title</nobr></A>
</DIV>

<DIV ID="linkmenu" CLASS="menudiv">
<CENTER><B>Organizations</B>
<BR>
<BR><A HREF="http://phoenix">Phoenix</A>
<BR><A HREF="http://phoenix/aqsl-bolt/index.html">AQSL Bolt</A>
</center>
</DIV>
<DIV ID="linkmenu2" CLASS="menudiv2">
<CENTER><B>Mike Title</B>
<BR>
<BR><A HREF="/">Link 1</A>
<BR><A HREF="/js/">Link 2</A>
</center>
</DIV>

<script type=text/javascript>
var isNS=(document.layers);
var isNS60=navigator.userAgent.indexOf("Gecko")!=-1?true:false;
if(isNS)document.captureEvents(Event.MOUSEMOVE);
if(isNS60)document.addEventListener("mousemove", track, true);
document.onmousemove=track;

function track(e) 
{
var x=(isNS||isNS60)?e.pageX:event.x; 
var y=(isNS||isNS60)?e.pageY:event.y;
document.exf1.x.value=x;
document.exf1.y.value=y;
isvis(x,y);
}

function isvis(x,y) {
  if(isNS60)
  {
    var ns6div = document.getElementById("linkmenu");
    if(ns6div.style.visibility!="hidden")
    {
	  document.exf1.test="yes";
      if(x<60||x>220||y<80||y>160)
	  {
	    ns6div.style.visibility="hidden";
	  }
    }
  }
  else if(isNS) {
    if(document.linkmenu.visibility!="hide") {
      if(x<60||x>220||y<80||y>166)document.linkmenu.visibility="hide";
    }
  } else if(linkmenu.style.visibility!="hidden") {
    if(x<60||x>220||y<80||y>186)linkmenu.style.visibility="hidden";
  }
  if(isNS60)
  {
    var ns6div = document.getElementById("linkmenu2");
    if(ns6div.style.visibility!="hidden")
    {
      if(x<60||x>220||y<80||y>160)
	  {
	    ns6div.style.visibility="hidden";
	  }
    }
  }
  else if(isNS) {
    if(document.linkmenu2.visibility!="hide") {
      if(x<60||x>220||y<90||y>201)document.linkmenu2.visibility="hide";
    }
  } else if(linkmenu2.style.visibility!="hidden") {
    if(x<60||x>220||y<90||y>201)linkmenu2.style.visibility="hidden";
  }
}

function menu(x,n) {
  if (x==1)
  {
    if(isNS60)
    {
      var ns6div = document.getElementById("linkmenu");
      ns6div.style.visibility=(n!=0)?"visible":"hidden";
    }
    else if(isNS) {document.linkmenu.visibility=(n!=0)?"visible":"hidden";
    }
	else
	  linkmenu.style.visibility=(n!=0)?"visible":"hidden";
  }
  else if (x==2)
  {
    if(isNS60)
    {
      var ns6div = document.getElementById("linkmenu2");
      ns6div.style.visibility=(n!=0)?"visible":"hidden";
    }
    else if(isNS)
	{
	  document.linkmenu2.visibility=(n!=0)?"visible":"hidden";
    }
	else
	  linkmenu2.style.visibility=(n!=0)?"visible":"hidden";
  }
}
</script>
<form name=exf1>
<input type=hidden name=x>
<input type=hidden name=y>
</form>

Times Viewed: 0

Leave a Reply

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