Cool Popup Menu

[Total: 0    Average: 0/5]

This will create a cool looking popup when you mouse over the links.

Head Code:

<script language="JavaScript">
function MM_reloadPage(init) {
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_findObj(n, d) {
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && document.getElementById) x=document.getElementById(n); return x;
}

function MM_showHideLayers() {
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
    obj.visibility=v; }
}
/* hide all */
function HA()
{
/* stop monitoring mouse */
LOOK=null;
MM_showHideLayers('Layer1','','hide');
MM_showHideLayers('Layer2','','hide');
MM_showHideLayers('Layer3','','hide');
}
var coor_X = new Array();
var coor_Y = new Array();
var coor_H = new Array();
var coor_W = new Array();
function addCoord(item,x,y,h,w)
{
 coor_X[item]=x;
 coor_Y[item]=y;
 coor_W[item]=w;
 coor_H[item]=h;
}
/* these should overlap where the box shows up */
addCoord(1,10,71,102,99);
addCoord(2,10,71,102,99);
addCoord(3,10,71,102,99);

var LOOK=null;
/* monitor mouse */
function MM(_v)
{
  /* look for mouse to enter coordinates */
  LOOK=_v;
  /* when mouse leaves coordinates close popup */
}
function mouseMoved() 
{ 
 /* IE only */
 if(!LOOK)return;
 var X=window.event.x;
 var Y=window.event.y;
 if(X<coor_X[LOOK] ||
   X>(coor_X[LOOK]+coor_W[LOOK]) ||
   Y<coor_Y[LOOK] ||
   Y>(coor_Y[LOOK]+coor_H[LOOK]))
 {
  HA();
 }
} 

document.onmousemove=mouseMoved 

</script>
<style type="text/css">
<!--
a:hover {  color: #0000FF; text-decoration: underline}
-->
</style>

Body Code:

<p> </p>
<p><a href="#" onMouseOver="HA();MM_showHideLayers('Layer1','','show');">LINK 1</a></p>
<p><a href="#" onMouseOver="HA();MM_showHideLayers('Layer2','','show');">LINK 2</a></p>
<p><a href="#" onMouseOver="HA();MM_showHideLayers('Layer3','','show');">LINK 3</a></p>
<div id="Layer1" style="position:absolute; left:10px; top:71px; width:102px; height:99px; z-index:1; visibility:hidden"> 
  <span onmouseover="MM(1);">
  <table border="0" cellpadding="0" cellspacing="0" width="69">
    <!-- fwtable fwsrc="Untitled" fwbase="test.gif" -->
    <tr> 
      <!-- Shim row, height 1. -->
      <td><img src="/data/shim.gif" width="4" height="1" border="0"></td>
      <td><img src="/data/shim.gif" width="61" height="1" border="0"></td>
      <td><img src="/data/shim.gif" width="4" height="1" border="0"></td>
      <td><img src="/data/shim.gif" width="1" height="1" border="0"></td>
    </tr>
    <tr valign="top"> 
      <!-- row 1 -->
      <td colspan="3"><img name="test_r1_c1" src="/data/test_r1_c1.gif" width="69" height="4" border="0"></td>
      <td><img src="/data/shim.gif" width="1" height="4" border="0"></td>
    </tr>
    <tr valign="top"> 
      <!-- row 2 -->
      <td rowspan="2"><img name="test_r2_c1" src="/data/test_r2_c1.gif" width="4" height="61" border="0"></td>
      <td background="/data/test_r2_c2.gif"><a href="#">COOL 1</a></td>
      <td rowspan="2"><img name="test_r2_c3" src="/data/test_r2_c3.gif" width="4" height="61" border="0"></td>
      <td><img src="/data/shim.gif" width="1" height="56" border="0"></td>
    </tr>
    <tr valign="top"> 
      <!-- row 3 -->
      <td><img name="test_r3_c2" src="/data/test_r3_c2.gif" width="61" height="5" border="0"></td>
      <td><img src="/data/shim.gif" width="1" height="5" border="0"></td>
    </tr>
  </table>
</span>
</div>
<div id="Layer2" style="position:absolute; left:10px; top:71px; width:102px; height:99px; z-index:1; visibility:hidden"> 
  <span onmouseover="MM(1);">
  <table border="0" cellpadding="0" cellspacing="0" width="69">
    <!-- fwtable fwsrc="Untitled" fwbase="test.gif" -->
    <tr> 
      <!-- Shim row, height 1. -->
      <td><img src="/data/shim.gif" width="4" height="1" border="0"></td>
      <td><img src="/data/shim.gif" width="61" height="1" border="0"></td>
      <td><img src="/data/shim.gif" width="4" height="1" border="0"></td>
      <td><img src="/data/shim.gif" width="1" height="1" border="0"></td>
    </tr>
    <tr valign="top"> 
      <!-- row 1 -->
      <td colspan="3"><img name="test_r1_c1" src="/data/test_r1_c1.gif" width="69" height="4" border="0"></td>
      <td><img src="/data/shim.gif" width="1" height="4" border="0"></td>
    </tr>
    <tr valign="top"> 
      <!-- row 2 -->
      <td rowspan="2"><img name="test_r2_c1" src="/data/test_r2_c1.gif" width="4" height="61" border="0"></td>
      <td background="/data/test_r2_c2.gif"><a href="#">COOL 2</a></td>
      <td rowspan="2"><img name="test_r2_c3" src="/data/test_r2_c3.gif" width="4" height="61" border="0"></td>
      <td><img src="/data/shim.gif" width="1" height="56" border="0"></td>
    </tr>
    <tr valign="top"> 
      <!-- row 3 -->
      <td><img name="test_r3_c2" src="/data/test_r3_c2.gif" width="61" height="5" border="0"></td>
      <td><img src="/data/shim.gif" width="1" height="5" border="0"></td>
    </tr>
  </table>
</span>
</div>
<div id="Layer3" style="position:absolute; left:10px; top:71px; width:102px; height:99px; z-index:1; visibility:hidden"> 
  <span onmouseover="MM(1);">
  <table border="0" cellpadding="0" cellspacing="0" width="69">
    <!-- fwtable fwsrc="Untitled" fwbase="test.gif" -->
    <tr> 
      <!-- Shim row, height 1. -->
      <td><img src="/data/shim.gif" width="4" height="1" border="0"></td>
      <td><img src="/data/shim.gif" width="61" height="1" border="0"></td>
      <td><img src="/data/shim.gif" width="4" height="1" border="0"></td>
      <td><img src="/data/shim.gif" width="1" height="1" border="0"></td>
    </tr>
    <tr valign="top"> 
      <!-- row 1 -->
      <td colspan="3"><img name="test_r1_c1" src="/data/test_r1_c1.gif" width="69" height="4" border="0"></td>
      <td><img src="/data/shim.gif" width="1" height="4" border="0"></td>
    </tr>
    <tr valign="top"> 
      <!-- row 2 -->
      <td rowspan="2"><img name="test_r2_c1" src="/data/test_r2_c1.gif" width="4" height="61" border="0"></td>
      <td background="/data/test_r2_c2.gif"><a href="#">COOL 3</a></td>
      <td rowspan="2"><img name="test_r2_c3" src="/data/test_r2_c3.gif" width="4" height="61" border="0"></td>
      <td><img src="/data/shim.gif" width="1" height="56" border="0"></td>
    </tr>
    <tr valign="top"> 
      <!-- row 3 -->
      <td><img name="test_r3_c2" src="/data/test_r3_c2.gif" width="61" height="5" border="0"></td>
      <td><img src="/data/shim.gif" width="1" height="5" border="0"></td>
    </tr>
  </table>
</span>
</div>

Times Viewed: 3

Leave a Reply

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