|
EXAMPLE
1) Insert these two scripts in the <HEAD> section of the page.
2) Insert the following HTML code in the <BODY>
section where you want the menu links to appear in the page.
3) insert
the onLoad event handler inside the <BODY> tag as follows:
<body
onLoad="initheadl()",
followed by other tags such as bgcolor, etc..
4) Define the style and the content to appear inside
the frameset in this section of the HTML code. Each box has an ID for the menu
(a id=menu0, etc..) and an ID for the information itself (span id=news0, etc..).
They should balance, i.e. two boxes will have two of each defined.
<table cellspacing="0"
cellpadding="4" width="100%" border="0">
<tbody>
<tr>
<td bgcolor="#F1F1E4">
<a id="menu0" onmouseover="changeHeadlines(0);
chill(0)"
href="http://simplythebest.net">
<b>SimplytheBest.net</b></a>
<a id="menu1" onmouseover="changeHeadlines(1);
chill(1)"
href="http://planmagic.com">
<b>PlanMagic.com</b></a>
<a id="menu2" onmouseover="changeHeadlines(2);
chill(2)"
href="http://webquestpro.com">
<b>WebQuestPro.com</b></a>
<td bgcolor="#FFFFFF" align="left"
height="100%">
<span id="news0" style="position:relative;"></span>
<span id="news1" style="VISIBILITY: hidden; WIDTH: 100%; POSITION: absolute" height="100%">
<BDO style="OVERFLOW-Y: auto; WIDTH: 430px; HEIGHT: 125px">
<a href="shareware.html">Shareware & Freeware</a><br>
<a href="scripts/dhtml_scripts.html">DHTML scripts</a><br>
<a href="cgi_scripts/cgi_scripts.html">Perl CGI scripts</a><br>
</BDO></span>
<span id="news2" style="VISIBILITY: hidden; WIDTH: 100%; POSITION: absolute" height="100%">
<BDO style="OVERFLOW-Y: auto; WIDTH: 430px; HEIGHT: 125px">
<a href="http://planmagic.com/business_plan.html">Business planning</a><br>
<a href="http://planmagic.com/marketingplanning.html">Marketing planning</a><br>
</BDO></span>
5) Define the color of the header links
in this section of the second script:
eval("document.all.menu" + i + ".style.color='#666666'");
else
eval("document.all.menu" + i + ".style.color='#000099'");
6) Modify these parameters to adjust the
number of headers and related popups:
Below is an example with 4 header links
instead of 3 (as in the example above):
In the script section:
if (document.all)
for (i=0; i<4; i++)
In the HTML code add the fourth header link:
<a id="menu3"
onmouseover="changeHeadlines(3);
chill(3)" href="yourlink.html"><b>Header
4</b></a>
And the related popup box:
<span id="news4" style="VISIBILITY: hidden; WIDTH: 100%; POSITION: absolute" height="100%">
<BDO style="OVERFLOW-Y: auto; WIDTH: 430px; HEIGHT: 125px">
<a href="link1.html">Title 1</a><br>
<a href="link2.html">Title 2</a><br>
</BDO></span>
|
