navtree2.html at NavTree

<HTML>
<HEAD>
<TITLE>Navigation Tree Sample
</TITLE>

<script language="JavaScript" src="navtree2.js">
</script>

<!--
============ DEFOME STYLE  =====================================================
Define style for use with the tree for the content box.
-->
<STYLE>
    .root { background: red; font-weight: bold; font-size: 16pt}
    .link-A { background: cyan;}
    .link2 { background: lightblue; vertical-align:top}
</STYLE>

</HEAD>
<BODY ALIGN=CENTER BGCOLOR=LIGHTGREEN>

<!--
============ LAYOUT HTML FIRST==================================================
Do the HTML Layout First, with the tree location put within a DIVISION
-->
<H1>Navigation Tree Demo</H1>
<HR>
<H2>Standard Tree</H2>
<TABLE Border=1 Width=50%><TR><TD VALIGN=TOP WIDTH=50% HEIGHT=80>
<DIV ID="NAVTREE" style='width: 50%; position: absolute; background:white'>Tree go here</DIV>
</TD></TR></TABLE>
<BR/>
<HR>
Content go here

<!--
============ GENARTE TREE CONTENT ==============================================
Generate the tree content AFTER division declaration
-->
<script>
    function NodeLink(link, desc, img)
    {   out='<IMG style="background:green" src="'+img+'"></IMG>';
        out+='<A HREF="'+link+'">'+desc+'</A>';
        return out;
    }
    
    //===== INITIALIZE Navigation Tree with the Root node with class id "root"
    NAVTREE("NAVTREE", "Demo<BR>TEST", "root", 1);
    //===== Add the node and meanwhile capture the id
    node1=AddNode(NodeLink("http://www.php.net", "PHP", "IMAGE/link.gif"), "link2", 0, 1);
    node2=AddNode("NODE2", "link-A", 0, 0);
    node3=AddNode("NODE3", "link-A", 0, 0);
    node4=AddNode("NODE4", "link-A", 0, 0);

    node1a=AddNode("NODE1a<BR>TEST<BR>TEST 2", "link2", node1, 0);
    node1b=AddNode("NODE1b", "link2", node1, 0);
    node1c=AddNode("NODE1c", "link2", node1, 0);
    node1d=AddNode("NODE1d", "link2", node1, 0);

    node1a1=AddNode("NODE1a1", "link2", node1a, 0);
    node1a2=AddNode("NODE1a2", "link2", node1a, 0);
    node1a3=AddNode("NODE1a3", "link2", node1a, 0);
    node1a4=AddNode("NODE1a4", "link2", node1a, 0);
    //===== Retrieve the cookie
    GetCookie();
    //===== Display it
    divTag = document.getElementById(divID);
    divTag.innerHTML = PrintTree(0,0);
</script>

</html>