Forums
This topic is locked
Getting some javascript to work
Posted 24 Jan 2002 23:56:32
1
has voted
24 Jan 2002 23:56:32 James Sheffield posted:
I have a link that causes a layer to appear when I move the mouse over the link. The layer contains a form with a table inside it. The table contains some text and checkboxes. The main problem is that the layer appears but when I move between cells in the table the layer disappears. Does anyone know how I can get round this? When I move out of the area of the table I want the layer to disappear. Any ideas or solutions would be greatly appreciated. I have enclosed the code at the bottom.
Thanks.
<html>
<head>
<title>Untitled Document</title>
<SCRIPT LANGUAGE="javascript">
<!--
function MM_findObj(n, d) { //v4.01
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 && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v3.0
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'<img src=../images/fwzone/forum/icon_smile_sad.gif border=0 align=middle>v='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</SCRIPT>
<STYLE TYPE="text/css">
#mylayer {
POSITION: absolute;
VISIBILITY: hidden;
TOP: 21px;
LEFT: 30px;
Z-INDEX: 100;
}
</STYLE>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<A HREF="" ONMOUSEOVER="MM_showHideLayers('mylayer','','show')">Hello</A>
<DIV ID="mylayer" onMouseOut="MM_showHideLayers('mylayer','','hide')">
<form name="form1" method="post" action="" >
<table border="1" width="535" height="307" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td width="10"> </td>
<td width="150">Model</td>
<td width="25">
<input type="checkbox" name="checkbox" value="checkbox">
</td>
<td width="20" bgcolor="#EBEBEB"> </td>
<td width="10" bgcolor="#CCCCCC"> </td>
<td width="80">23 Nov</td>
<td width="25">
<input type="checkbox" name="checkbox" value="checkbox">
</td>
<td width="20" bgcolor="#EBEBEB"> </td>
<td width="10"> </td>
<td width="150">Total Cost </td>
<td width="25">
<input type="checkbox" name="checkbox" value="checkbox">
</td>
<td width="10"> </td>
</tr>
<tr>
<td width="10"> </td>
<td width="150">Manufacturer</td>
<td width="25">
<input type="checkbox" name="checkbox2" value="checkbox">
</td>
<td width="20" bgcolor="#EBEBEB"> </td>
<td width="10" bgcolor="#CCCCCC"> </td>
<td width="80">30 Nov</td>
<td width="25">
<input type="checkbox" name="checkbox2" value="checkbox">
</td>
<td width="20" bgcolor="#EBEBEB"> </td>
<td width="10"> </td>
<td width="150">Total Sales </td>
<td width="25">
<input type="checkbox" name="checkbox2" value="checkbox">
</td>
<td width="10"> </td>
</tr>
<tr>
<td width="10"> </td>
<td width="150">Cover</td>
<td width="25">
<input type="checkbox" name="checkbox3" value="checkbox">
</td>
<td width="20" bgcolor="#EBEBEB"> </td>
<td width="10" bgcolor="#CCCCCC"> </td>
<td width="80">07 Dec</td>
<td width="25">
<input type="checkbox" name="checkbox3" value="checkbox">
</td>
<td width="20" bgcolor="#EBEBEB"> </td>
<td width="10"> </td>
<td width="150">Total Sales Inc. VAT </td>
<td width="25">
<input type="checkbox" name="checkbox3" value="checkbox">
</td>
<td width="10"> </td>
</tr>
<tr>
<td width="10"> </td>
<td width="150">Grade</td>
<td width="25">
<input type="checkbox" name="checkbox4" value="checkbox">
</td>
<td width="20" bgcolor="#EBEBEB"> </td>
<td width="10" bgcolor="#CCCCCC"> </td>
<td width="80">14 Dec</td>
<td width="25">
<input type="checkbox" name="checkbox4" value="checkbox">
</td>
<td width="20" bgcolor="#EBEBEB"> </td>
<td width="10"> </td>
<td width="150">IFC Term (Mth) </td>
<td width="25">
<input type="checkbox" name="checkbox4" value="checkbox">
</td>
<td width="10"> </td>
</tr>
<tr>
<td width="10"> </td>
<td width="150">Grouping</td>
<td width="25">
<input type="checkbox" name="checkbox5" value="checkbox">
</td>
<td width="20" bgcolor="#EBEBEB"> </td>
<td width="10" bgcolor="#CCCCCC"> </td>
<td width="80">21 Dec</td>
<td width="25">
<input type="checkbox" name="checkbox5" value="checkbox">
</td>
<td width="20" bgcolor="#EBEBEB"> </td>
<td width="10"> </td>
<td width="150">IFC Cost </td>
<td width="25">
<input type="checkbox" name="checkbox5" value="checkbox">
</td>
<td width="10"> </td>
</tr>
<tr>
<td width="10"> </td>
<td width="150">Promotion</td>
<td width="25">
<input type="checkbox" name="checkbox6" value="checkbox">
</td>
<td width="20" bgcolor="#EBEBEB"> </td>
<td width="10" bgcolor="#CCCCCC"> </td>
<td width="80">28 Dec</td>
<td width="25">
<input type="checkbox" name="checkbox6" value="checkbox">
</td>
<td width="20" bgcolor="#EBEBEB"> </td>
<td width="10"> </td>
<td width="150">Net Cash Margin </td>
<td width="25">
<input type="checkbox" name="checkbox6" value="checkbox">
</td>
<td width="10"> </td>
</tr>
<tr>
<td width="10"> </td>
<td width="150">Exch Rate to £</td>
<td width="25">
<input type="checkbox" name="checkbox7" value="checkbox">
</td>
<td width="20" bgcolor="#EBEBEB"> </td>
<td width="10" bgcolor="#CCCCCC"> </td>
<td width="80">04 Jan</td>
<td width="25">
<input type="checkbox" name="checkbox7" value="checkbox">
</td>
<td width="20" bgcolor="#EBEBEB"> </td>
<td width="10"> </td>
<td width="150">Margin % </td>
<td width="25">
<input type="checkbox" name="checkbox7" value="checkbox">
</td>
<td width="10"> </td>
</tr>
<tr>
<td width="10"> </td>
<td width="150">Group Cost</td>
<td width="25">
<input type="checkbox" name="checkbox8" value="checkbox">
</td>
<td width="20" bgcolor="#EBEBEB"> </td>
<td width="10" bgcolor="#CCCCCC"> </td>
<td width="80">11 Jan</td>
<td width="25">
<input type="checkbox" name="checkbox" value="checkbox">
</td>
<td width="20" bgcolor="#EBEBEB"> </td>
<td width="10"> </td>
<td width="150"> </td>
<td width="25"> </td>
<td width="10"> </td>
</tr>
<tr>
<td width="10"> </td>
<td width="150">Group S.P</td>
<td width="25">
<input type="checkbox" name="checkbox9" value="checkbox">
</td>
<td width="20" bgcolor="#EBEBEB"> </td>
<td width="10" bgcolor="#CCCCCC"> </td>
<td width="80">18 Jan</td>
<td width="25">
<input type="checkbox" name="checkbox2" value="checkbox">
</td>
<td width="20" bgcolor="#EBEBEB"> </td>
<td width="10"> </td>
<td width="150"> </td>
<td width="25"> </td>
<td width="10"> </td>
</tr>
<tr>
<td width="10"> </td>
<td width="150">Group Margin</td>
<td width="25">
<input type="checkbox" name="checkbox10" value="checkbox">
</td>
<td width="20" bgcolor="#EBEBEB"> </td>
<td width="10" bgcolor="#CCCCCC"> </td>
<td width="80">01 Feb</td>
<td width="25">
<input type="checkbox" name="checkbox3" value="checkbox">
</td>
<td width="20" bgcolor="#EBEBEB"> </td>
<td width="10"> </td>
<td width="150"> </td>
<td width="25"> </td>
<td width="10"> </td>
</tr>
<tr>
<td width="10"> </td>
<td width="150">Group Margin %</td>
<td width="25">
<input type="checkbox" name="checkbox11" value="checkbox">
</td>
<td width="20" bgcolor="#EBEBEB"> </td>
<td width="10" bgcolor="#CCCCCC"> </td>
<td width="80">08 Feb</td>
<td width="25">
<input type="checkbox" name="checkbox4" value="checkbox">
</td>
<td width="20" bgcolor="#EBEBEB"> </td>
<td width="10"> </td>
<td width="150"> </td>
<td width="25"> </td>
<td width="10"> </td>
</tr>
<tr>
<td width="10"> </td>
<td width="150"> </td>
<td width="25"> </td>
<td width="20" bgcolor="#EBEBEB"> </td>
<td width="10" bgcolor="#CCCCCC"> </td>
<td width="80">15 Feb</td>
<td width="25">
<input type="checkbox" name="checkbox5" value="checkbox">
</td>
<td width="20" bgcolor="#EBEBEB"> </td>
<td width="10"> </td>
<td width="150"> </td>
<td width="25"> </td>
<td width="10"> </td>
</tr>
<tr>
<td width="10"> </td>
<td width="150"> </td>
<td width="25"> </td>
<td width="20" bgcolor="#EBEBEB"> </td>
<td width="10" bgcolor="#CCCCCC"> </td>
<td width="80">22 Feb</td>
<td width="25">
<input type="checkbox" name="checkbox6" value="checkbox">
</td>
<td width="20" bgcolor="#EBEBEB"> </td>
<td width="10"> </td>
<td width="150"> </td>
<td width="25"> </td>
<td width="10"> </td>
</tr>
<tr>
<td width="10"> </td>
<td width="150"> </td>
<td width="25"> </td>
<td width="20" bgcolor="#EBEBEB"> </td>
<td width="10" bgcolor="#CCCCCC"> </td>
<td width="80">01 Mar</td>
<td width="25">
<input type="checkbox" name="checkbox7" value="checkbox">
</td>
<td width="20" bgcolor="#EBEBEB"> </td>
<td width="10"> </td>
<td width="150"> </td>
<td width="25"> </td>
<td width="10"> </td>
</tr>
<tr>
<td width="10" height="2"> </td>
<td width="150" height="2"> </td>
<td width="25" height="2"> </td>
<td width="20" bgcolor="#EBEBEB"> </td>
<td width="10" bgcolor="#CCCCCC"> </td>
<td width="80" height="2">08 Mar</td>
<td width="25" height="2">
<input type="checkbox" name="checkbox8" value="checkbox">
</td>
<td width="20" height="2" bgcolor="#EBEBEB"> </td>
<td width="10"> </td>
<td width="150" height="2"> </td>
<td width="25" height="2"> </td>
<td width="10" height="2"> </td>
</tr>
<tr>
<td width="10"> </td>
<td width="150"> </td>
<td width="25"> </td>
<td width="20" bgcolor="#EBEBEB"> </td>
<td width="10" bgcolor="#CCCCCC"> </td>
<td width="80">15 Mar</td>
<td width="25">
<input type="checkbox" name="checkbox9" value="checkbox">
</td>
<td width="20" bgcolor="#EBEBEB"> </td>
<td width="10"> </td>
<td width="150"> </td>
<td width="25"> </td>
<td width="10"> </td>
</tr>
<tr>
<td width="10"> </td>
<td width="150"> </td>
<td width="25"> </td>
<td width="20" bgcolor="#EBEBEB"> </td>
<td width="10" bgcolor="#CCCCCC"> </td>
<td width="80">22 Mar</td>
<td width="25">
<input type="checkbox" name="checkbox10" value="checkbox">
</td>
<td width="20" bgcolor="#EBEBEB"> </td>
<td width="10"> </td>
<td width="150"> </td>
<td width="25"> </td>
<td width="10"> </td>
</tr>
<tr>
<td width="10"> </td>
<td width="150"> </td>
<td width="25"> </td>
<td width="20" bgcolor="#EBEBEB"> </td>
<td width="10" bgcolor="#CCCCCC"> </td>
<td width="80">23 Mar</td>
<td width="25">
<input type="checkbox" name="checkbox11" value="checkbox">
</td>
<td width="20" bgcolor="#EBEBEB"> </td>
<td width="10"> </td>
<td width="150"> </td>
<td width="25"> </td>
<td width="10"> </td>
</tr>
</table>
</form>
</DIV>
</body>
</html>