Menu Box PopsUp

[Total: 0    Average: 0/5]

This shows how to have a div appear over a href/link when the mouse is moved over it.

Head Code:

<STYLE TYPE="text/css">
.lilguydiv {position:absolute;top:100;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;}
</STYLE>

Body Code:

There is a text link called "Menu" that is on the upper left portion of this page.
It is absolutely positioned on this page, and that is why it is located there.
<DIV CLASS="lilguydiv">
<A HREF="#" ONMOUSEOVER="menu(1)">Menu</A>
</DIV>

<DIV ID="linkmenu" CLASS="menudiv">
<CENTER><B>Select A Link</B>
<BR>
<BR><A HREF="http://www.js-examples.com/">To JS-Examples</A>
<BR><A HREF="http://www.js-examples.com/js/">To JS-Examples JS</A>
</center>
</DIV>

<script type=text/javascript>
var isNS=(document.layers);
if(isNS)document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=track;

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

function isvis(x,y) {
  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";
  }
}

function menu(n) {
  if(isNS) {
    document.linkmenu.visibility=(n!=0)?"visible":"hidden";
  } else linkmenu.style.visibility=(n!=0)?"visible":"hidden";
}

</SCRIPT>

Times Viewed: 0

Leave a Reply

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