-- text figures

Figure 4 Team.htm


<!--
    
Title:          Generated Menu: The Team
Purpose:        
Date Created:   11/01/1998
Author:         DHTML Tree Menu Builder
Change History: 
-->

<HTML>
<HEAD>
    <META NAME="GENERATOR"   Content="DHTML Tree Menu Builder">
    <META NAME="DESCRIPTION"  Content="Generated Menu: The Team">
    <META HTTP-EQUIV="Content-Type" content="text/html; charset=iso-8859-1">
    <TITLE>Generated Menu: The Team</TITLE>
</HEAD>

<BODY TEXT="WHITE" BGCOLOR="003399" LINK="WHITE"
      VLINK="WHITE" ALINK="YELLOW"
      TOPMARGIN=0 LEFTMARGIN=10
      LANGUAGE = "VBScript"
      onClick = clickHandler
      onMouseOver = mouseOverHandler
      onMouseOut = mouseOutHandler

>

<BASE TARGET="cdMain">

<STYLE>
    IMG  { cursor:hand; }
    SPAN { cursor:hand; }
</STYLE>

<DIV STYLE="margin-left:10;">
<IMG SRC="images/bullet-plus.png" ID=MI-1><SPAN ID=MT-1>Developers</SPAN><BR>
<DIV ID=C-1 STYLE="margin-left:15; display:None;">
    <IMG SRC="images/bullet-plus.png" ID=MI-2><SPAN ID=MT-2>Rick Burgin</SPAN><BR>
    <DIV ID=C-2 STYLE="margin-left:15; display:None;">
        <IMG SRC="images/bullet-filler.png">
        <A HREF="mailto:Rick_Burgin@rsausa.com" 
         TITLE="mailto:Rick_Burgin@rsausa.com">Email</A><BR>
    </DIV>
    <IMG SRC="images/bullet-plus.png" ID=MI-3><SPAN ID=MT-3>Bill McLuskie</SPAN><BR>
    <DIV ID=C-3 STYLE="margin-left:15; display:None;">
        <IMG SRC="images/bullet-filler.png">
        <A HREF="mailto:William@McLuskie.com" 
         TITLE="mailto:William@McLuskie.com">Email</A><BR>
        <IMG SRC="images/bullet-filler.png">
        <A HREF="http://www.mcluskie.com/william/" TITLE="http://www.mcluskie.com/
         william/">Web Page</A><BR>
    </DIV>
    <IMG SRC="images/bullet-plus.png" ID=MI-4><SPAN ID=MT-4>Patty Moore</SPAN><BR>
    <DIV ID=C-4 STYLE="margin-left:15; display:None;">
        <IMG SRC="images/bullet-filler.png">
        <A HREF="mailto:Patty_Moore@rsausa.com" 
         TITLE="mailto:Patty_Moore@rsausa.com">Email</A><BR>
    </DIV>
</DIV>
</DIV>

<P ALIGN=CENTER>
    <INPUT ID=ALLExpand   TYPE=BUTTON VALUE="Expand All"
     STYLE="Color:BLACK;Font-Size:50%"></INPUT>
    <INPUT ID=ALLCollapse TYPE=BUTTON VALUE="Collapse All"
     STYLE="Color:BLACK;Font-Size:50%"></INPUT>
</P>

<SCRIPT LANGUAGE="VBScript">
    Option Explicit

    Sub clickHandler()

        Dim I
        Dim strParentId
        Dim objChild
        Dim objParentImage
        Dim sDisplay
        Dim sImage

        '== Identify the item clicked
        strParentId = Window.Event.SrcElement.ID
        If Left(strParentId, 1) = "M" Then
            '== Identify child DIV and parent IMG objects
            Set objChild = Document.All("C" & Mid(strParentId, 3))
            Set objParentImage = Document.All("MI" & Mid(strParentId, 3))
            '== manipulate their attributes
            If objChild.Style.Display = "none" Then
                objChild.Style.Display = ""
                objParentImage.Src = "images/bullet-minus.png"
            Else
                objChild.Style.Display = "none"
                objParentImage.Src = "images/bullet-plus.png"
            End If
            Set objChild = Nothing
            Set objParentImage = Nothing
        ElseIf Left(strParentId, 3) = "ALL" Then
            If Mid(strParentId, 4) = "Expand" Then
                sDisplay = ""
                sImage = "images/bullet-minus.png"
            Else
                sDisplay = "none"
                sImage = "images/bullet-plus.png"
            End If
            For i = 0 To Document.All.Length - 1
                If Left(Document.All(i).ID, 1) = "C" Then
                    Document.All(i).Style.Display = sDisplay
                End If
                If Left(Document.All(i).ID, 2) = "MI" Then
                    Document.All(i).Src = sImage
                End If
            Next
        End If
    End Sub

    Sub mouseOverHandler()

        If Window.Event.SrcElement.TagName = "A" Or _
           Left(Window.Event.SrcElement.ID, 2) = "MT" Or _
           Left(Window.Event.SrcElement.ID, 3) = "ALL" _
           Then
            If Window.Event.SrcElement.ID = "EXTERNAL" Then
                Window.Event.SrcElement.Style.Color = "LIGHTGREEN"
            Else
                Window.Event.SrcElement.Style.Color = "YELLOW"
            End If
        ElseIf Left(Window.Event.SrcElement.ID, 2) = "MI" Then
            If Document.All("MT" & Mid(Window.Event.SrcElement.ID, _
                             3)).ID = "EXTERNAL" Then
                Document.All("MT" & Mid(Window.Event.SrcElement.ID, _
                             3)).Style.Color = "LIGHTGREEN"
            Else
                Document.All("MT" & Mid(Window.Event.SrcElement.ID, _
                             3)).Style.Color = "YELLOW"
            End If
        End If
    End Sub

    Sub mouseOutHandler()

        If Window.Event.SrcElement.TagName = "A" Or _
           Left(Window.Event.SrcElement.ID, 2) = "MT" _
           Then
            Window.Event.SrcElement.Style.Color = "WHITE"
        ElseIf Left(Window.Event.SrcElement.ID, 3) = "ALL" Then
            Window.Event.SrcElement.Style.Color = "BLACK"
        ElseIf Left(Window.Event.SrcElement.ID, 2) = "MI" Then
            Document.All("MT"
                         & Mid(Window.Event.SrcElement.ID, 3)).Style.Color = "WHITE"
        End If
    End Sub

</SCRIPT>

</BODY>
</HTML>

Figure 6 Menu Database Columns

Column Name
Description

menu_name
Contains the name assigned to the tree menu. In the sample tree menu, the menu_name is team.

menu_index
A unique index used to order the records in the menu definition. The records must be indexed in the same order as they will appear in the tree menu itself.

menu_type
A control code to identify how the record is used in the menu definition:
C Control Information
M
Menu Header
L
Menu Item (with a link to a URL)
D
Menu Item (with a link to an externa document)
N
Menu Item (without a link-in other words, a Null link)

E
End of Menu

menu_text
This is a multipurpose column. If the menu_type is C, then this field contains the name of the Control setting. If the menu_type is M, L, D, or N, then this field contains the text to be printed in the tree menu.

menu_url
This is also a multipurpose column. If the menu_type is C, then this field contains the value for the Control setting. If the menu_type is L or D, then this field contains the URL to be executed when the user clicks on the menu item.

Figure 7 Control Settings

Setting
Description

TEXT
The color of the menu text.

BGCOLOR
The background color for the page.

LINK
The color for all menu items that are links.

VLINK
The color for visited links.

ALINK
The color for active links.

MOLINK
The color to change the text to when the mouse moves over it. This color is used for menu headers and menu links (types M and L).

MOELINK
The color to change the text to when the mouse moves over a link to an external document (type D). This is useful for letting the user know that they are about to launch another application to read the document. An example is launching Microsoft Word to view a .doc file.

Figure 9 Team.asp


<%@ LANGUAGE="VBSCRIPT" %>
<%  OPTION EXPLICIT %>

<!--

Title:          Generated Menu: The Team
Purpose:        
Date Created:   11/01/1998
Author:         DHTML Tree Menu Builder
Change History: 
-->

<HTML>
<HEAD>
    <META NAME="GENERATOR"   Content="DHTML Tree Menu Builder">
    <META NAME="DESCRIPTION"  Content="Generated Menu: The Team">
    <META HTTP-EQUIV="Content-Type" content="text/html; charset=iso-8859-1">
    <TITLE>Generated Menu: The Team</TITLE>
</HEAD>

<BODY TEXT="WHITE" BGCOLOR="003399" LINK="WHITE"
      VLINK="WHITE" ALINK="YELLOW"
      TOPMARGIN=0 LEFTMARGIN=10
      LANGUAGE = "VBScript"
      onClick = clickHandler
      onMouseOver = mouseOverHandler
      onMouseOut = mouseOutHandler

>

<BASE TARGET="cdMain">

<STYLE>
    IMG  { cursor:hand; }
    SPAN { cursor:hand; }
</STYLE>

<%
    Response.Write buildMenu()

    '== Dynamically build the menu from a database.

    Function buildMenu()

        Dim i               '== Index
        Dim iCurLevel       '== Index of current menu level
        Dim iCurMenu        '== Index of current submenu
        Dim iaMarginLeft    '== Left Margin for indenting submenus
        Dim sReturn         '== Return value (built menu)
        Dim DataConn        '== Ado Data connection
        Dim rsMenu          '== Recordset for the menu data
        Const adOpenKeyset = 1
        Const adLockBatchOptimistic = 4

        '== Types used in menu definition
        Const sNULL = "N"
        Const sLINK = "L"
        Const sEDOC = "D"   '== External Document
        Const sMENU = "M"
        Const sEOM  = "E"    '== End of Menu

        '== Initialize data
        iCurLevel = 0
        iCurMenu = 0
        iaMarginLeft = Array(10, 15, 20, 25, 30, 35)

        '== Retrieve data from database
        Set DataConn = Server.CreateObject("ADODB.Connection")
            Set rsMenu = Server.CreateObject("ADODB.Recordset")
        rsMenu.Open "SELECT * from Definitions where menu_name='team' order by 
        menu_index","driver={Microsoft Access Driver (*.mdb)};DBQ=E:\Articles for 
        MIND\DHTML Menu Builder\DHTML Menu Builder\DHTML_Menus.mdb", adOpenKeyset, 
        adLockBatchOptimistic

        '== Build the menu
        sReturn = ""
        sReturn = sReturn & "<DIV STYLE=""margin-left:" & iaMarginLeft(iCurLevel) 
            & ";"">" & vbCrLf
        Do While Not rsMenu.EOF
            sReturn = sReturn & String(iCurLevel, vbTab)
            Select Case Trim(rsMenu(2))
                Case sNULL
                    sReturn = sReturn & "<IMG SRC=""images/bullet-filler.png"">" _
                        & Trim(rsMenu(3)) & "<BR>"
                Case sLINK
                    sReturn = sReturn & "<IMG SRC=""images/bullet-filler.png""> _
                    <A HREF=""" & Trim(rsMenu(4)) & """  TITLE=""" & _
                    Trim(rsMenu(4)) & """>" & Trim(rsMenu(3)) & "</A><BR>"
                Case sEDOC
                    sReturn = sReturn & "<IMG SRC=""images/bullet-filler.png""> _
                    <A ID=EXTERNAL HREF=""" & Trim(rsMenu(4)) & _
                    """ TITLE=""External document - " & Trim(rsMenu(4)) & _
                    """>" & Trim(rsMenu(3)) & "</A><BR>"
                Case sMENU
                    iCurLevel = iCurLevel + 1
                    iCurMenu = iCurMenu + 1
                    sReturn = sReturn _
                        & "<IMG SRC=""images/bullet-plus.png"" ID=MI-" & _
                        iCurMenu & "><SPAN ID=MT-" & iCurMenu & ">" & _
                        Trim(rsMenu(3)) & "</SPAN><BR>" _
                            & vbCrLf _
                            & String(iCurLevel, vbTab) _
                            & "<DIV ID=C-" & iCurMenu & " STYLE=""margin-left:" & _
                            iaMarginLeft(iCurLevel) & "; display:None;"">"
                Case sEOM
                    sReturn = sReturn & "</DIV>"
                    iCurLevel = iCurLevel - 1
                Case Else
            End Select
            sReturn = sReturn & vbCrLf
            rsMenu.MoveNext
        Loop

        sReturn = sReturn & "</DIV>" & vbCrLf

        '== Return the menu
        buildMenu = sReturn

    End Function

%>

<P ALIGN=CENTER>
    <INPUT ID=ALLExpand   TYPE=BUTTON VALUE="Expand All"
     STYLE="Color:BLACK;Font-Size:50%"></INPUT>
    <INPUT ID=ALLCollapse TYPE=BUTTON VALUE="Collapse All"
     STYLE="Color:BLACK;Font-Size:50%"></INPUT>
</P>

<SCRIPT LANGUAGE="VBScript">
    Option Explicit

    Sub clickHandler()

        Dim i
        Dim strParentId
        Dim objChild
        Dim objParentImage
        Dim sDisplay
        Dim sImage

        '== Identify the item clicked
        strParentId = Window.Event.SrcElement.ID
        If Left(strParentId, 1) = "M" Then
            '== Identify child DIV and parent IMG objects
            Set objChild = Document.All("C" & Mid(strParentId, 3))
            Set objParentImage = Document.All("MI" & Mid(strParentId, 3))
            '== manipulate their attributes
            If objChild.Style.Display = "none" Then
                objChild.Style.Display = ""
                objParentImage.Src = "images/bullet-minus.png"
            Else
                objChild.Style.Display = "none"
                objParentImage.Src = "images/bullet-plus.png"
            End If
            Set objChild = Nothing
            Set objParentImage = Nothing
        ElseIf Left(strParentId, 3) = "ALL" Then
            If Mid(strParentId, 4) = "Expand" Then
                sDisplay = ""
                sImage = "images/bullet-minus.png"
            Else
                sDisplay = "none"
                sImage = "images/bullet-plus.png"
            End If
            For i = 0 To Document.All.Length - 1
                If Left(Document.All(i).ID, 1) = "C" Then
                    Document.All(i).Style.Display = sDisplay
                End If
                If Left(Document.All(i).ID, 2) = "MI" Then
                    Document.All(i).Src = sImage
                End If
            Next
        End If

    End Sub


    Sub mouseOverHandler()

        If Window.Event.SrcElement.TagName = "A" Or _
           Left(Window.Event.SrcElement.ID, 2) = "MT" Or _
           Left(Window.Event.SrcElement.ID, 3) = "ALL" _
           Then
            If Window.Event.SrcElement.ID = "EXTERNAL" Then
                Window.Event.SrcElement.Style.Color = "LIGHTGREEN"
            Else
                Window.Event.SrcElement.Style.Color = "YELLOW"
            End If
        ElseIf Left(Window.Event.SrcElement.ID, 2) = "MI" Then
            If Document.All("MT" & Mid(Window.Event.SrcElement.ID, 3)).ID _
                    = "EXTERNAL" Then
                Document.All("MT" & Mid(Window.Event.SrcElement.ID, _
                3)).Style.Color =   "LIGHTGREEN"
            Else
                Document.All("MT" & Mid(Window.Event.SrcElement.ID, _
                3)).Style.Color = "YELLOW"
            End If
        End If

    End Sub



    Sub mouseOutHandler()
        If Window.Event.SrcElement.TagName = "A" Or _
           Left(Window.Event.SrcElement.ID, 2) = "MT" _
        Then
            Window.Event.SrcElement.Style.Color = "WHITE"
        ElseIf Left(Window.Event.SrcElement.ID, 3) = "ALL" Then
            Window.Event.SrcElement.Style.Color = "BLACK"
        ElseIf Left(Window.Event.SrcElement.ID, 2) = "MI" Then
            Document.All("MT" & Mid(Window.Event.SrcElement.ID, _
            3)).Style.Color = "WHITE"
        End If

    End Sub

</SCRIPT>

</BODY>
</HTML>

Setting	Description
TEXT	The color of the menu text.
BGCOLOR	The background color for the page.
LINK	The color for all menu items that are links.
VLINK	The color for visited links.
ALINK	The color for active links.
MOLINK	The color to change the text to when the mouse moves over it. This color is used for menu headers and menu links (types M and L).
MOELINK	The color to change the text to when the mouse moves over a link to an external document (type D). This is useful for letting the user know that they are about to launch another application to read the document. An example is launching Microsoft Word to view a .doc file.