 |
<!--This demonstration is based on the Dynamic Positioning Test Page II file -->
<HTML>
<HEAD>
<TITLE> Dynamic Positioning Test Page III </TITLE>
<script language="JavaScript">
<!--
function returnObject(object) {
return (document.all) ? document.all[object]:document.getElementById(object);
}
//-->
</script>
</HEAD>
<BODY leftmargin="0" marginwidth="0" marginheight="50" topmargin="50">
<div align="center">
<span id="menu1" style="visibility:hidden;position:absolute;text-align:left;background-color:Red;color:white;font-family:Verdana;font-weight:Bold"
onmouseover="this.style.visibility='visible'"
onmouseout="this.style.visibility='hidden';
returnObject('menu2').style.visibility='hidden';">
<a href="#" style="color:white;font-family:Verdana;font-weight:Bold;text-decoration:none">Dummy link 1</a><br>
<a href="#" onmouseover="returnObject('menu2').style.left=returnObject('menu1').offsetLeft + returnObject('menu1').offsetWidth;
returnObject('menu2').style.top=returnObject('menu1').offsetTop + 20;
returnObject('menu2').style.visibility='visible'"
style="color:white;font-family:Verdana;font-weight:Bold;text-decoration:none">
Toon menu 2 ></a><br>
<a href="#" style="color:white;font-family:Verdana;font-weight:Bold;text-decoration:none">Dummy link 2</a>
</span>
<span id="menu2" style="visibility:hidden;position:absolute;padding:1px;background-color:Blue;color:white;font-family:Verdana;font-weight:Bold"
onmouseover="this.style.visibility='visible';
returnObject('menu1').style.visibility='visible';"
onmouseout="this.style.visibility='hidden';
returnObject('menu1').style.visibility='hidden'">
<a href="#" style="color:white;font-family:Verdana;font-weight:Bold;text-decoration:none">Menu 2</a>
</span>
<a href="#"
onmouseover="returnObject('menu1').style.left=this.offsetLeft;
returnObject('menu1').style.pixelTop=this.offsetHeight + this.offsetTop;
returnObject('menu1').style.visibility='visible'"
onmouseout="returnObject('menu1').style.visibility='hidden'"
style="background-color:blue;color:white;font-family:Verdana;font-weight:Bold">
Toon menu 1</a>
</div>
</BODY>
</HTML>
|
|
