Milonic provide full featured pull down web menus for some of the worlds largest companies
click here to see what it can do for you

Download Milonic DHTML Menu
Buy Milonic DHTML Menu

Back To Start Of Archive
Taken From The Forum: Help & Support for DHTML Menu Version 5+
Last Updated: Wednesday November 19 2008 - 06:11:57

Please help. I will buy the menu if it works with tooltips


Poster: webdragon
Dated: Thursday December 23 2004 - 23:11:48 UTC

Hi Guys,

I am trying to put in a dhtml tooltip script from [http://www.dynamicdrive.com/dynamicindex5/popinfo.htm]

The script worked perfectly until I put the Milonic Menu in. Then the tooltips just didn't appear.

Please could you give me some advice, I am designing a site for some potential clients and will ask them to purchase the menu, when I have figured out if it will work with the tooltip script.

Thanks!

[/url]


Poster: kevin3442
Dated: Thursday December 23 2004 - 23:44:21 UTC

Hi webdragon,

I'm not familiar with the tooltip script that you mentioned or how it may interact with Milonic Menus. But you might be interested to know that the Milonic system also supports tooltips (for menus as well as other objects on the page). The Milonic tooltips are very flexible and can be styled in a wide variety of ways, just like the menus themselves. Check out the sample.

Cheers,

Kevin

Client has bought the menu but still need help


Poster: webdragon
Dated: Friday December 24 2004 - 10:08:42 UTC

Hi Kevin,

Thanks for your response, but I actually need the tooltip script to work on a rollover image in one of my pages, not on the menu.

Problem is my client has bought the menu, so I hope that I can still use it.

Thanks

Mandy


Poster: Andy
Dated: Friday December 24 2004 - 10:12:18 UTC

The menu will allow you to show tooltips from any HTML element that supports onmouseover.

The login button on our website uses the following:

Code:
onmouseover="showtip('<b>You are not logged in</b><br>You need to login to download and use some of the good stuff');img_on('login')" onmouseout="popdown();



The above can be applied to ANY html object, not just menu items.

Hope this helps
Andy

Thanks!


Poster: webdragon
Dated: Friday December 24 2004 - 10:16:28 UTC

Hi Andy,

Thanks, I will give it a try.

Do you know if I can apply my own formatting to the tooltip, like giving it a heading, with a description as well as placing it in a table cell on the right of my image?

Sorry, I know its alot to ask, but I've been battling with this for a while.

Tooltips


Poster: webdragon
Dated: Friday December 24 2004 - 11:12:52 UTC

Hi Guys,

I have put the tooltip script in my code and now when I hover over my image the tip milonic menu seems to shrink. I wish I could show you but cant upload anything.


Poster: Ruth
Dated: Friday December 24 2004 - 21:58:34 UTC

Hi Webdragon,
In lieu of putting a test page on the web, since you indicate you can't do that, use the code button above and give us:

1. One of your html pages that has the menu and the tool tips on it [Milonic menu and tips]

2. The menu_data.js file as you have it set up

3. The tooltips file as you have it set up

We can then duplicate the page and the files and see what it does and figure out why it's doing it.

What OS are you using, and also what version of the Milonic menu?

Ruth

Tooltips


Poster: webdragon
Dated: Saturday December 25 2004 - 13:42:00 UTC

Hi Ruth,

Sorry but I don't know how to give you the files. Must I paste it in?

Then send another reply with the images, then another with the js file?

Can I possibly email a zip file to you?


Poster: webdragon
Dated: Saturday December 25 2004 - 13:52:15 UTC

Hi Ruth,

Sorry read the instructions so here goes:

shrink.htm

Code:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<!-- RollOver Script -->
<script language="JavaScript">
<!--

<!--
// loading images:
if (((navigator.appName == "Netscape") &&
(parseInt (navigator.appVersion) >=3 )) ||
((navigator.appName == "Microsoft Internet Explorer") &&
(parseInt (navigator.appVersion) >=4 )))
{//AC buttons
a1 = new Image
a1.src = "images/img_1.gif"
a2 = new Image
a2.src = "images/img_2.gif"
a3 = new Image
a3.src = "images/img_4.gif"
a4 = new Image
a4.src = "images/img_0.gif"

c1 = new Image
c1.src = "images/img_1_over.gif"
c2 = new Image
c2.src = "images/img_2_over.gif"
c3 = new Image
c3.src = "images/img_4_over.gif"
c4 = new Image
c4.src = "images/img_0_over.gif"


}
// The Roll over function:
function hiLight(imgID,imgName) {if (((navigator.appName == "Netscape") &&
(parseInt (navigator.appVersion) >=3 )) ||
((navigator.appName == "Microsoft Internet Explorer") &&
(parseInt (navigator.appVersion) >=4 )))
{document.images[imgID].src = eval(imgName + ".src");}}
// -->
//-->
</script>
<!-- end RollOver Script -->


</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<!--
    Milonic DHTML Website Navigation Menu Version 5.0+
    Copyright 2004 (c) Milonic Solutions Limited (UK). All Rights Reserved.
    Please visit http://www.milonic.com/ for more information.

    Although this software may have been freely downloaded, you must obtain a license before using it in any production environment.      
    The free use of this menu is only available for Non-Profit, Educational & Personal Web Sites who have obtained a license to use.
   
    Free, Commercial and Corporate Licenses are available from our website.
    You also need to include a link back to http://www.milonic.com/ if you use the free license.
   
    All Copyright notices MUST remain in place at ALL times.
    This includes the first three lines of this notice on every page that uses the menu.
    If you cannot comply with all of the above requirements, please contact us to arrange a license waiver.
-->   
   
<script type="text/javascript" src="milonic_src.js"></script>
   
<param copyright="JavaScript Menu by Milonic" value="http://www.milonic.com/"></param>
<script   type="text/javascript">

if(ns4)_d.write("<scr"+"ipt type=text/javascript src=mmenuns4.js><\/scr"+"ipt>");      
  else _d.write("<scr"+"ipt type=text/javascript src=mmenudom.js><\/scr"+"ipt>");

</script>
<script type="text/javascript" src="menu_data.js"></script>
<script type="text/javascript" src="tooltips.js"></script>


<table border="0" align="center" cellpadding="0" cellspacing="0" class="mainTable">
  <tr>
    <td height="85" valign="top">
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td><a href="default.asp"><img src="images/img_logo.gif" alt="Mission Leadership" width="168" height="62" border="0"></a></td>
        </tr>
        <tr>
          <td height="23"><table width="100%" height="20" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td bgcolor="#07548E" align="left" valign="top" height="21" class="bgTopMenu"><script>
                  with(milonic=new menuname("Main Menu")){
                  style=menuStyle;
                  top=155;
                  left=200;
                  alwaysvisible=1;
                  orientation="horizontal";
                  overfilter="";
                  position="relative";
                  aI("text=Home;url=default.asp;showmenu=Home;itemwidth=50px;align=center;");
                  aI("text=Who We Are;url=whoWeAre.asp;showmenu=WhoWeAre;itemwidth=90px;align=center;");
                  aI("text=Mission Leadership;url=missionLeadership.asp;showmenu=MissionLeadership;itemwidth=120px;align=center;");
                  aI("text=Mission Dashboard;url=missionDashboard.asp;showmenu=MissionDashboard;itemwidth=120px;align=center;");
                  aI("text=Press Centre;url=PressCentre.asp;showmenu=PressCentre;itemwidth=90px;align=center;");
                  aI("text=Contact Us;url=contactUs.asp;showmenu=ContactUs;itemwidth=90px;align=center;");      
                  }
                  drawMenus();      
                  </script></td>
              </tr>
            </table></td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td height="100%" valign="top"> <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td height="100%" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="4">
              <tr>
                <td> <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td class="breadcrumbsBg"><img src="images/img_breadcrumbArrows.gif" width="22" height="17" border="0" align="absmiddle"><a href="missionLeadership.asp" class="breadcrumbs">Mission
                        Leadership</a> </td>
                    </tr>
                  </table></td>
              </tr>
              <tr>
                <td valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td width="190" valign="top">
                        <table width="190" border="0" cellspacing="0" cellpadding="0">
                          <tr>
                            <td><img src="images/img_vision.jpg" width="190" height="121" border="0"></td>
                          </tr>
                          <tr>
                            <td class="topSublinkBgActive"><img src="images/img_blueArrow.gif" width="16" height="14" border="0" align="absbottom"><a href="missionLeadership.asp" class="topSublinkActive">Mission
                              Leadership </a></td>
                          </tr>
                          <tr>
                            <td height="10" valign="middle" class="sublinkBg"><img src="images/img_blueArrow.gif" width="16" height="14" border="0" align="absmiddle"><a href="behaviours.asp" class="sublink">Behaviours</a></td>
                          </tr>
                          <tr>
                            <td valign="middle" class="sublinkBg"><img src="images/img_blueArrow.gif" width="16" height="14" border="0" align="absmiddle"><a href="process.asp" class="sublink">Process</a></td>
                          </tr>
                          <tr>
                            <td valign="middle" class="sublinkBg"><a href="performance.asp" class="sublink"><img src="images/img_blueArrow.gif" width="16" height="14" border="0" align="absmiddle">Performance</a></td>
                          </tr>
                          <tr>
                            <td valign="top">&nbsp;</td>
                          </tr>
                        </table>
                      </td>
                      <td width="20" valign="top">&nbsp;</td>
                      <td valign="top"><table width="100%" border="0" cellspacing="2" cellpadding="2">
                          <tr>
                            <td class="heading1">Mission Leadership</td>
                          </tr>
                          <tr>
                            <td valign="top" class="content"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                  <td valign="top" class="contentSpacing"></td>
                                </tr>
                                <tr>
                                  <td align="center" valign="top" class="contentSpacing"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                      <tr>
                                        <td>&nbsp;</td>
                                        <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                            <tr>
                                              <td width="280"> <table width="280" border="0" cellspacing="0" cellpadding="0">
                                                  <tr>
                                                    <td width="280" height="285" valign="top">
                                                      <table width="280" height="290" border="0" cellpadding="0" cellspacing="0">
                                                        <tr>
                                                          <td height="183" rowspan="2" valign="top"><a href="process.asp" onMouseOver="showtip('process text');hiLight('process','c1')" onMouseOut="popdown;hiLight('process','a1')" onFocus="if(this.blur)this.blur()"><img src="images/img_1.gif" name="process" width="85" height="183" border="0" id="process"></a></td>
                                                          <td height="83"><img src="images/img_6.gif" width="100" height="83" border="0"><a href="behaviours.asp" onMouseOver="showtip('behaviour test');hiLight('behaviour','c2')" onMouseOut="popdown;hiLight('behaviour','a2')" onFocus="if(this.blur)this.blur()"><img src="images/img_2.gif" name="behaviour" width="95" height="83" border="0" id="behaviour"></a></td>
                                                        </tr>
                                                        <tr>
                                                          <td width="195" height="100"><a href="missionLeadership.asp" onMouseOver="showtip('missionLeadershiptest');hiLight('missionLeadership','c4')" onMouseOut="popdown;hiLight('missionLeadership','a4')" onFocus="if(this.blur)this.blur()"><img src="images/img_0.gif" name="missionLeadership" width="195" height="100" border="0" id="missionLeadership"></a></td>
                                                        </tr>
                                                        <tr>
                                                          <td height="89" colspan="2" valign="top"><table width="280" border="0" cellspacing="0" cellpadding="0">
                                                              <tr>
                                                                <td width="155" height="107"><img src="images/img_5.gif" width="155" height="107" border="0"></td>
                                                                <td width="125" height="107"><a href="performance.asp" onMouseOver="showtip('performance test');hiLight('performance','c3')" onMouseOut="popdown;hiLight('performance','a3')" onFocus="if(this.blur)this.blur()"><img src="images/img_4.gif" name="performance" width="125" height="107" border="0" id="performance"></a></td>
                                                              </tr>
                                                            </table></td>
                                                        </tr>
                                                      </table></td>
                                                  </tr>
                                                </table></td>
                                              <td valign="top"></td>
                                            </tr>
                                          </table></td>
                                      </tr>
                                    </table></td>
                                </tr>
                              </table></td>
                          </tr>
                        </table></td>
                    </tr>
                  </table></td>
              </tr>
            </table>
          </td>
        </tr>
        <tr><td height="25" valign="bottom"><!--#include file="inc/footer.asp" -->
</td></tr>
      </table></td>
  </tr>
</table>
</body>
</html>


Menu_data.js

Code:

/*
Milonic DHTML Menu - JavaScript Website Navigation System.
Copyright 2004 (c) Milonic Solutions Limited. All Rights Reserved.
Version 5+ Data File structure is the property of Milonic Solutions Ltd and must only be used in Milonic DHTML Products
This is a commercial software product, please visit http://www.milonic.com/ for more information.
See http://www.milonic.com/license.php for Commercial License Agreement
All Copyright statements must always remain in place in all files at all times
*******  PLEASE NOTE: THIS IS NOT FREE SOFTWARE, IT MUST BE LICENSED FOR ALL USE  *******
*/

_menuCloseDelay=500           // The time delay for menus to remain visible on mouse out
_menuOpenDelay=150            // The time delay before menus open on mouse over
_subOffsetTop=5             // Sub menu top offset
_subOffsetLeft=-10            // Sub menu left offset



with(menuStyle=new mm_style()){
onbgcolor="#0066B3";
oncolor="#ffffff";
offbgcolor="#002A8A";
offcolor="#FFFFFF";
bordercolor="#FFFFFF";
borderstyle="solid";
borderwidth=1;
separatorcolor="#FFFFFF";
separatorsize="1";
padding=3;
fontsize="10px";
fontweight="bold";
fontfamily="Verdana, Arial, Tahoma, Sans-Serif";
pagecolor="#FFFFFF";
pagebgcolor="#066CAE";
headercolor="#FFFFFF";
headerbgcolor="#066CAE";
itemheight=19
subimagepadding="2";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color='#777777', Direction=135, Strength=5)";
outfilter="randomdissolve(duration=0.3)";
}

with(subMenuStyle=new mm_style()){
onbgcolor="#0066B3";
oncolor="#FFFFFF";
offbgcolor="#E6F4FF";
offcolor="#07548E";
bordercolor="#171F69";
borderstyle="solid";
borderwidth=1;
separatorcolor="#171F69";
separatorsize="1";
padding=3;
fontsize="10px";
fontweight="bold";
fontfamily="Verdana, Arial, Tahoma, Sans-Serif";
}

with(subNavStyle=new mm_style()){
onbgcolor="#07548E";
oncolor="#FFFFFF";
offbgcolor="#E8EBED";
offcolor="#07548E";
bordercolor="#171F69";
borderstyle="solid";
borderwidth=1;
separatorcolor="#171F69";
separatorsize="1";
padding=2;
fontsize="10px";
fontweight="bold";
fontfamily="Verdana, Arial, Tahoma, Sans-Serif";
}

with(milonic=new menuname("Home")){
style=subMenuStyle;
overflow="scroll";
/* aI("text=Home;url=home.asp;"); */
}

with(milonic=new menuname("WhoWeAre")){
style=subMenuStyle;
}

with(milonic=new menuname("MissionLeadership")){
style=subMenuStyle;
aI("text=Behaviours;url=behaviours.asp;showmenu=behaviours;itemwidth=125px;align=left;");
aI("text=Process;url=process.asp;itemwidth=125px;align=left;");
aI("text=Performance;url=performance.asp;itemwidth=125px;align=left;");
}

with(milonic=new menuname("behaviours")){
style=subMenuStyle;
aI("text=Behaviour 1;url=behaviour1.asp;itemwidth=125px;align=left;");
aI("text=Behaviour 2;url=behaviour2.asp;itemwidth=125px;align=left;");
aI("text=Behaviour 3;url=behaviour3.asp;itemwidth=125px;align=left;");
aI("text=Behaviour 4;url=behaviour4.asp;itemwidth=125px;align=left;");
aI("text=Behaviour 5;url=behaviour5.asp;itemwidth=125px;align=left;");
}

with(milonic=new menuname("MissionDashboard")){
style=subMenuStyle;
}

with(milonic=new menuname("PressCentre")){
style=subMenuStyle;
}

with(milonic=new menuname("ContactUs")){
style=subMenuStyle;
}



drawMenus();



Tooltips File

Code:
/*
   Milonic DHTML Menu Tooltips Module  tooltips.js version 1.2 - 16th December 2004
   This module is only compatible with the Milonic DHTML Menu version 5.63 or higher

   Copyright 2004 (c) Milonic Solutions Limited. All Rights Reserved.
   This is a commercial software product, please visit http://www.milonic.com/ for more information.
*/

M_ToolTipDelay=0    // Milliseconds after menu has been displayed before showing tooltip
M_maxWidth=0          // Sets the maximum width, set to 0 for 100%

// The above 2 parameters are the only user definable parameters for this module.
// In order to use this module you will also need the Milonic DHTML Menu code files
// The syntax for tooltips is: showtip("This is your text <b><i>With HTML </i></b> too!")

with(M_toolTipStyle=new mm_style()){
    offbgcolor = "#ffffa1";
      offcolor = "#000000";
   bordercolor = "#999999";
   borderstyle = "solid";
       padding = 1
   borderwidth = 1
      fontsize = "10px";
     fontstyle = "normal";
    fontfamily = "tahoma, verdana";   
    overfilter = "Fade(duration=0.2);Shadow(color='#777777', Direction=135, Strength=5)"
}
with(new menuname("M_toolTips"))
{
   top="offset=22"
   left="offset=10"
   style=M_toolTipStyle;
   aI("text=;type=ToolTip;");
}

drawMenus()



function buildTips(_ttext)                // Function for showing Tooltips
{
   _Tmnu=getMenuByName("M_toolTips")     // Get a reference to the tooltips menu
   _Tgm=gmobj("menu"+_Tmnu)              // Get the object reference to the tooltips menu
   if(!ns4&&(!_m[_Tmnu][23]&&!_startM))  // If the menu hasn't been built yet, build it
   {
      _m[_Tmnu][23]=_Tmnu               // Set the menu built flag
      BDMenu(_Tmnu)                     // Build the menu, this only happens once, or at least should do.
   }

   _el=_m[_Tmnu][0][0]                   // Set the menu element reference for building the menu items
   _mi[_el][1]=_ttext                    // Set the menu items text. This is the text that will be displayed
   if(ns4)
   {
      dte="<table width=1 cellpadding=0 cellspacing=0 border=0>"+drawItem(_el)+"</table>";
      with(_Tgm.document){open();write(dte);close()}
      _brd=gmobj("bord"+_Tmnu)
      _brdwid=(_m[_Tmnu][6].borderwidth*2)
      _brd.clip.width=_Tgm.clip.width+_brdwid
      _brd.clip.height=_Tgm.clip.height+_brdwid
      _brd.bgColor=_m[_Tmnu][6].bordercolor
      
   }
   else
   {
      _Tgm.innerHTML=_drawMenu(_Tmnu)   // Change the menu item for browsers other than Netscape 4
   }
      
   _i=_itemRef
   popup("M_toolTips",1);                // Display the menu based on MouseX and MouseY coordinates   
   _itemRef=_i
   _gp=gpos(_gm)

   if((_gp[0]+_gp[2])>_bH)
   {
      spos(_gm,MouseY-_gp[2])
   }
   
   if(ns4)
   {
      _brd.zIndex=_zi+1
      _zi++
      _Tgm.zIndex=_zi+1
   }
   else
   {
      //alert()
      _Tgm.style.zIndex=_zi+100
   }
   
}

function showtip(_ttext)                  // This function that sets the timer for showing the tooltip
{
   clearTimeout(_Mtip)                     // Clear the ToolTop timer
   _Mtip=null                            // Need to set the timer to null for Konquerers sake.
   if(!op5&&!op6)                        // Don't bother with Opera 5 or Opera 6, these browsers do not support dynamic change of text
   if(!inDragMode)
   {   
      _Mtip=setTimeout("buildTips('"+_ttext+"',1)",_menuOpenDelay+M_ToolTipDelay) // Set the tooltip timer
   }
}



Thanks!

P.s I actually have a dynamic html tooltip script that I would really like to use but it is not from Milonic. I already built it in my page and it worked perfectly until I pasted in the Milonic menu. So I tried to use the tooltips script from milonic and it isn't doing exactly what I want it to do.

I would actually like to have an image map in my html page. When you hover over one of the parts of the image, it must display the title and a description that the client can put his own text into. Can the tooltips do this?

[/img]


Poster: Ruth
Dated: Saturday December 25 2004 - 16:03:41 UTC

Hi Webdragon,

1. To stop the menu shrinking, remove the top= left= since the main menu is bound to the table, and add menuwidth="100%"; leaving the rest as it is.

2. As to your other question. I'm not sure how you want things to look. Can you post the page code as it is with what you are using now so I can see what layout you want? I don't have your images, but I made ones the correct size so that works fine, since all I need is to see how the tips are showing.

The milonic tooltips can be formatted as you want them, color, width, bordercolor, text etc, so I'd think it would do just what you want. Since they can be applied to the html object then you can set them up on an image map. You could also check out the IMAGE MAP SAMPLEwhich would let you even use a menu to do image map rollovers and this will allow you to do the headers you mentioned, though I can't visualize a header in a tooltip, but I think tooltips will also work with headers, and I know it works with image maps.

Ruth

Tooltips


Poster: webdragon
Dated: Saturday December 25 2004 - 17:44:38 UTC

Firstly, YOU ARE A STAR!!! Thanks Ruth, the shrinking problem is now fixed, and I will try that image map sample. Basically all I really want is for the tooltip to appear in a table cell on the right of the image. The total size for the image is 280 x 290, I don't know if that will help?

The way I had origionally done it was using a script from dynamicdrive.com, I'll post the url here....

http://www.dynamicdrive.com/dynamicindex5/popinfo.htm

I have pasted in the code for all the files needed below:

This is the page that I orniginally did before my client bought the menu:

pagewithoutmilonic.htm:

Code:
<html>
<head>
<title>Mission Leadership</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<!-- RollOver Script -->
<script language="JavaScript">
<!--

<!--
// loading images:
if (((navigator.appName == "Netscape") &&
(parseInt (navigator.appVersion) >=3 )) ||
((navigator.appName == "Microsoft Internet Explorer") &&
(parseInt (navigator.appVersion) >=4 )))
{//AC buttons
a1 = new Image
a1.src = "images/img_1.gif"
a2 = new Image
a2.src = "images/img_2.gif"
a3 = new Image
a3.src = "images/img_4.gif"
a4 = new Image
a4.src = "images/img_0.gif"

c1 = new Image
c1.src = "images/img_1_over.gif"
c2 = new Image
c2.src = "images/img_2_over.gif"
c3 = new Image
c3.src = "images/img_4_over.gif"
c4 = new Image
c4.src = "images/img_0_over.gif"


}
// The Roll over function:
function hiLight(imgID,imgName) {if (((navigator.appName == "Netscape") &&
(parseInt (navigator.appVersion) >=3 )) ||
((navigator.appName == "Microsoft Internet Explorer") &&
(parseInt (navigator.appVersion) >=4 )))
{document.images[imgID].src = eval(imgName + ".src");}}
// -->
//-->
</script>
<!-- end RollOver Script -->

<SCRIPT language="JavaScript1.2" src="main.js" type="text/javascript"></SCRIPT>   
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<DIV id="TipLayer2" style="visibility:hidden;position:absolute;z-index:1000;top:-100;"></DIV>
<SCRIPT language="JavaScript1.2" src="style.js" type="text/javascript"></SCRIPT> 
<table border="0" align="center" cellpadding="0" cellspacing="0" class="mainTable">
  <tr>
    <td height="85" valign="top">
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td><a href="default.asp"><img src="images/img_logo.gif" alt="Mission Leadership" width="168" height="62" border="0"></a></td>
        </tr>
        <tr>
          <td height="23"><table width="100%" height="20" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td bgcolor="#07548E" align="left" valign="top" height="21" class="bgTopMenu">
                 menu
                </td>
              </tr>
            </table></td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td height="100%" valign="top"> <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td height="100%" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="4">
              <tr>
                <td> <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td class="breadcrumbsBg"><img src="images/img_breadcrumbArrows.gif" width="22" height="17" border="0" align="absmiddle"><a href="missionLeadership.asp" class="breadcrumbs">Mission
                        Leadership</a> </td>
                    </tr>
                  </table></td>
              </tr>
              <tr>
                <td valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td width="190" valign="top">
                        <table width="190" border="0" cellspacing="0" cellpadding="0">
                          <tr>
                            <td><img src="images/img_vision.jpg" width="190" height="121" border="0"></td>
                          </tr>
                          <tr>
                            <td class="topSublinkBgActive"><img src="images/img_blueArrow.gif" width="16" height="14" border="0" align="absbottom"><a href="missionLeadership.asp" class="topSublinkActive">Mission
                              Leadership </a></td>
                          </tr>
                          <tr>
                            <td height="10" valign="middle" class="sublinkBg"><img src="images/img_blueArrow.gif" width="16" height="14" border="0" align="absmiddle"><a href="behaviours.asp" class="sublink">Behaviours</a></td>
                          </tr>
                          <tr>
                            <td valign="middle" class="sublinkBg"><img src="images/img_blueArrow.gif" width="16" height="14" border="0" align="absmiddle"><a href="process.asp" class="sublink">Process</a></td>
                          </tr>
                          <tr>
                            <td valign="middle" class="sublinkBg"><a href="performance.asp" class="sublink"><img src="images/img_blueArrow.gif" width="16" height="14" border="0" align="absmiddle">Performance</a></td>
                          </tr>
                          <tr>
                            <td valign="top">&nbsp;</td>
                          </tr>
                        </table>
                      </td>
                      <td width="20" valign="top">&nbsp;</td>
                      <td valign="top"><table width="100%" border="0" cellspacing="2" cellpadding="2">
                          <tr>
                            <td class="heading1">Mission Leadership</td>
                          </tr>
                          <tr>
                            <td valign="top" class="content"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                  <td valign="top" class="contentSpacing"></td>
                                </tr>
                                <tr>
                                  <td align="center" valign="top" class="contentSpacing"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                      <tr>
                                        <td>&nbsp;</td>
                                        <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                            <tr>
                                              <td width="280"> <table width="280" border="0" cellspacing="0" cellpadding="0">
                                                  <tr>
                                                    <td width="280" height="285" valign="top">
                                                      <table width="280" height="290" border="0" cellpadding="0" cellspacing="0">
                                                        <tr>
                                                          <td height="183" rowspan="2" valign="top"><a href="process.asp" onMouseOver="stm(Text[2],Style[2]);hiLight('process','c1')" onMouseOut="htm();hiLight('process','a1')" onFocus="if(this.blur)this.blur()"><img src="images/img_1.gif" name="process" width="85" height="183" border="0" id="process"></a></td>
                                                          <td height="83"><a href="behaviours.asp" onMouseOver="stm(Text[1],Style[1]);hiLight('behaviour','c2')" onMouseOut="htm();hiLight('behaviour','a2')" onFocus="if(this.blur)this.blur()"><img src="images/img_6.gif" width="100" height="83" border="0"><img src="images/img_2.gif" name="behaviour" width="95" height="83" border="0" id="behaviour"></a></td>
                                                        </tr>
                                                        <tr>
                                                          <td width="195" height="100"><a href="missionLeadership.asp" onMouseOver="stm(Text[3],Style[3]);hiLight('missionLeadership','c4')" onMouseOut="htm();hiLight('missionLeadership','a4')" onFocus="if(this.blur)this.blur()"><img src="images/img_0.gif" name="missionLeadership" width="195" height="100" border="0" id="missionLeadership"></a></td>
                                                        </tr>
                                                        <tr>
                                                          <td height="89" colspan="2" valign="top"><table width="280" border="0" cellspacing="0" cellpadding="0">
                                                              <tr>
                                                                <td width="155" height="107"><img src="images/img_5.gif" width="155" height="107" border="0"></td>
                                                                <td width="125" height="107"><a href="performance.asp" onMouseOver="stm(Text[0],Style[0]);hiLight('performance','c3')" onMouseOut="htm();hiLight('performance','a3')" onFocus="if(this.blur)this.blur()"><img src="images/img_4.gif" name="performance" width="125" height="107" border="0" id="performance"></a></td>
                                                              </tr>
                                                            </table></td>
                                                        </tr>
                                                      </table></td>
                                                  </tr>
                                                </table></td>
                                              <td valign="top"></td>
                                            </tr>
                                          </table></td>
                                      </tr>
                                    </table></td>
                                </tr>
                              </table></td>
                          </tr>
                        </table></td>
                    </tr>
                  </table></td>
              </tr>
            </table>
          </td>
        </tr>
        <tr><td height="25" valign="bottom"><!--#include file="inc/footer.asp" -->
</td></tr>
      </table></td>
  </tr>
</table>
</body>
</html>


This is the main.js file:
Code:
<!--
/*
Pleas leave this notice.
DHTML tip message version 1.2 copyright Essam Gamal 2003 (http://migoicons.tripod.com, migoicons __at__ hotmail.com)
All modifications are done in the style.js you should not modify this file.  Created on : 06/03/2003
Script featured on and can be found at Dynamic Drive (http://www.dynamicdrive.com)
*/

var ua = navigator.userAgent
var Mps = navigator.productSub
var dom = (document.getElementById)? 1:0
var ie4 = (document.all&&!dom)? 1:0
var ie5 = (document.all&&dom)? 1:0
var nn4 =(navigator.appName.toLowerCase() == "netscape" && parseInt(navigator.appVersion) == 4)
var nn6 = (dom&&!ie5)? 1:0
var sNav = (nn4||nn6||ie4||ie5)? 1:0
var cssFilters = ((ua.indexOf("MSIE 5.5")>=0||ua.indexOf("MSIE 6")>=0)&&ua.indexOf("Opera")<0)? 1:0
var Style=[],Text=[],Count=0,sbw=0,move=0,hs="",mx,my,scl,sct,ww,wh,obj,sl,st,ih,iw,vl,hl,sv,evlh,evlw,tbody
var HideTip = "eval(obj+sv+hl+';'+obj+sl+'=0;'+obj+st+'=-800')"
var doc_root = ((ie5&&ua.indexOf("Opera")<0||ie4)&&document.compatMode=="CSS1Compat")? "document.documentElement":"document.body"
var PX = (nn6)? "px" :""

if(sNav) {
   window.onresize = ReloadTip
   document.onmousemove = MoveTip
   if(nn4) document.captureEvents(Event.MOUSEMOVE)
}   
if(nn4||nn6) {
   mx = "e.pageX"
   my = "e.pageY"
   scl = "window.pageXOffset"
   sct = "window.pageYOffset"   
   if(nn4) {
      obj = "document.TipLayer2."
      sl = "left"
      st = "top"
      ih = "clip.height"
      iw = "clip.width"
      vl = "'show'"
      hl = "'hide'"
      sv = "visibility="
   }
   else obj = "document.getElementById('TipLayer2')."
}
if(ie4||ie5) {
   obj = "TipLayer2."
   mx = "event.x"
   my = "event.y"
   scl = "eval(doc_root).scrollLeft"
   sct = "eval(doc_root).scrollTop"
   if(ie5) {
      mx = mx+"+"+scl
      my = my+"+"+sct
   }
}
if(ie4||dom){
   sl = "style.left"
   st = "style.top"
   ih = "offsetHeight"
   iw = "offsetWidth"
   vl = "'visible'"
   hl = "'hidden'"
   sv = "style.visibility="
}
if(ie4||ie5||Mps>=20020823) {
   ww = "eval(doc_root).clientWidth"
   wh = "eval(doc_root).clientHeight"
}   
else {
   ww = "window.innerWidth"
   wh = "window.innerHeight"
   evlh = eval(wh)
   evlw = eval(ww)
   sbw=15
}   

function applyCssFilter(){
   if(cssFilters&&FiltersEnabled) {
      var dx = " progid:DXImageTransform.Microsoft."
      TipLayer2.style.filter = "revealTrans()"+dx+"Fade(Overlap=1.00 enabled=0)"+dx+"Inset(enabled=0)"+dx+"Iris(irisstyle=PLUS,motion=in enabled=0)"+dx+"Iris(irisstyle=PLUS,motion=out enabled=0)"+dx+"Iris(irisstyle=DIAMOND,motion=in enabled=0)"+dx+"Iris(irisstyle=DIAMOND,motion=out enabled=0)"+dx+"Iris(irisstyle=CROSS,motion=in enabled=0)"+dx+"Iris(irisstyle=CROSS,motion=out enabled=0)"+dx+"Iris(irisstyle=STAR,motion=in enabled=0)"+dx+"Iris(irisstyle=STAR,motion=out enabled=0)"+dx+"RadialWipe(wipestyle=CLOCK enabled=0)"+dx+"RadialWipe(wipestyle=WEDGE enabled=0)"+dx+"RadialWipe(wipestyle=RADIAL enabled=0)"+dx+"Pixelate(MaxSquare=35,enabled=0)"+dx+"Slide(slidestyle=HIDE,Bands=25 enabled=0)"+dx+"Slide(slidestyle=PUSH,Bands=25 enabled=0)"+dx+"Slide(slidestyle=SWAP,Bands=25 enabled=0)"+dx+"Spiral(GridSizeX=16,GridSizeY=16 enabled=0)"+dx+"Stretch(stretchstyle=HIDE enabled=0)"+dx+"Stretch(stretchstyle=PUSH enabled=0)"+dx+"Stretch(stretchstyle=SPIN enabled=0)"+dx+"Wheel(spokes=16 enabled=0)"+dx+"GradientWipe(GradientSize=1.00,wipestyle=0,motion=forward enabled=0)"+dx+"GradientWipe(GradientSize=1.00,wipestyle=0,motion=reverse enabled=0)"+dx+"GradientWipe(GradientSize=1.00,wipestyle=1,motion=forward enabled=0)"+dx+"GradientWipe(GradientSize=1.00,wipestyle=1,motion=reverse enabled=0)"+dx+"Zigzag(GridSizeX=8,GridSizeY=8 enabled=0)"+dx+"Alpha(enabled=0)"+dx+"Dropshadow(OffX=3,OffY=3,Positive=true,enabled=0)"+dx+"Shadow(strength=3,direction=135,enabled=0)"
   }
}

function stm(t,s) {
  if(sNav) {
     if(t.length<2||s.length<25) {
      var ErrorNotice = "DHTML TIP MESSAGE VERSION 1.2 ERROR NOTICE.\n"
      if(t.length<2&&s.length<25) alert(ErrorNotice+"It looks like you removed an entry or more from the Style Array and Text Array of this tip.\nTheir should be 25 entries in every Style Array even though empty and 2 in every Text Array. You defined only "+s.length+" entries in the Style Array and "+t.length+" entry in the Text Array. This tip won't be viewed to avoid errors")
      else if(t.length<2) alert(ErrorNotice+"It looks like you removed an entry or more from the Text Array of this tip.\nTheir should be 2 entries in every Text Array. You defined only "+t.length+" entry. This tip won't be viewed to avoid errors.")
      else if(s.length<25) alert(ErrorNotice+"It looks like you removed an entry or more from the Style Array of this tip.\nTheir should be 25 entries in every Style Array even though empty. You defined only "+s.length+" entries. This tip won't be viewed to avoid errors.")
   }
     else {
      var ab = "" ;var ap = ""
      var titCol = (s[0])? "COLOR='"+s[0]+"'" : ""
      var txtCol = (s[1])? "COLOR='"+s[1]+"'" : ""
      var titBgCol = (s[2])? "BGCOLOR='"+s[2]+"'" : ""
      var txtBgCol = (s[3])? "BGCOLOR='"+s[3]+"'" : ""
      var titBgImg = (s[4])? "BACKGROUND='"+s[4]+"'" : ""   
      var txtBgImg = (s[5])? "BACKGROUND='"+s[5]+"'" : ""
      var titTxtAli = (s[6] && s[6].toLowerCase()!="left")? "ALIGN='"+s[6]+"'" : ""
      var txtTxtAli = (s[7] && s[7].toLowerCase()!="left")? "ALIGN='"+s[7]+"'" : ""   
      var add_height = (s[15])? "HEIGHT='"+s[15]+"'" : ""
      if(!s[8])  s[8] = "Verdana,Arial,Helvetica"
      if(!s[9])  s[9] = "Verdana,Arial,Helvetica"               
      if(!s[12]) s[12] = 1
      if(!s[13]) s[13] = 1
      if(!s[14]) s[14] = 200
      if(!s[16]) s[16] = 0
      if(!s[17]) s[17] = 0
      if(!s[18]) s[18] = 10
      if(!s[19]) s[19] = 10
      hs = s[11].toLowerCase()
      if(Mps==20001108){
      if(s[2]) ab="STYLE='border:"+s[16]+"px solid"+" "+s[2]+"'"
      ap="STYLE='padding:"+s[17]+"px "+s[17]+"px "+s[17]+"px "+s[17]+"px'"}
      var closeLink=(hs=="sticky")? "<TD ALIGN='right'><FONT SIZE='"+s[12]+"' FACE='"+s[8]+"'><A HREF='javascript:void(0)' ONCLICK='stickyhide()' STYLE='text-decoration:none;color:"+s[0]+"'><B>Close</B></A></FONT></TD>":""
      var title=(t[0]||hs=="sticky")? "<TABLE WIDTH='100%' BORDER='0' CELLPADDING='0' CELLSPACING='0'><TR><TD "+titTxtAli+"><FONT SIZE='"+s[12]+"' FACE='"+s[8]+"' "+titCol+"><B>"+t[0]+"</B></FONT></TD>"+closeLink+"</TR></TABLE>" : ""
      var txt="<TABLE "+titBgImg+" "+ab+" WIDTH='"+s[14]+"' BORDER='0' CELLPADDING='"+s[16]+"' CELLSPACING='0' "+titBgCol+" ><TR><TD>"+title+"<TABLE WIDTH='100%' "+add_height+" BORDER='0' CELLPADDING='"+s[17]+"' CELLSPACING='0' "+txtBgCol+" "+txtBgImg+"><TR><TD "+txtTxtAli+" "+ap+" VALIGN='top'><FONT SIZE='"+s[13]+"' FACE='"+s[9]+"' "+txtCol +">"+t[1]+"</FONT></TD></TR></TABLE></TD></TR></TABLE>"
      if(nn4) {
         with(eval(obj+"document")) {
            open()
            write(txt)
            close()
         }
      }
      else eval(obj+"innerHTML=txt")
      tbody = {
         Pos:s[10].toLowerCase(),
         Xpos:s[18],
         Ypos:s[19],
         Transition:s[20],
         Duration:s[21],
         Alpha:s[22],
         ShadowType:s[23].toLowerCase(),
         ShadowColor:s[24],
         Width:parseInt(eval(obj+iw)+3+sbw)
      }
      if(ie4) {
         TipLayer2.style.width = s[14]
          tbody.Width = s[14]
      }
      Count=0   
      move=1
    }
  }
}

function MoveTip(e) {
   if(move) {
      var X,Y,MouseX = eval(mx),MouseY = eval(my); tbody.Height = parseInt(eval(obj+ih)+3)
      tbody.wiw = parseInt(eval(ww+"+"+scl)); tbody.wih = parseInt(eval(wh+"+"+sct))
      switch(tbody.Pos) {
         case "left" : X=MouseX-tbody.Width-tbody.Xpos; Y=MouseY+tbody.Ypos; break
         case "center": X=MouseX-(tbody.Width/2); Y=MouseY+tbody.Ypos; break
         case "float": X=tbody.Xpos+eval(scl); Y=tbody.Ypos+eval(sct); break   
         case "fixed": X=tbody.Xpos; Y=tbody.Ypos; break      
         default: X=MouseX+tbody.Xpos; Y=MouseY+tbody.Ypos
      }

      if(tbody.wiw<tbody.Width+X) X = tbody.wiw-tbody.Width
      if(tbody.wih<tbody.Height+Y+sbw) {
         if(tbody.Pos=="float"||tbody.Pos=="fixed") Y = tbody.wih-tbody.Height-sbw
         else Y = MouseY-tbody.Height
      }
      if(X<0) X=0
      eval(obj+sl+"=X+PX;"+obj+st+"=Y+PX")
      ViewTip()
   }
}

function ViewTip() {
     Count++
   if(Count == 1) {
      if(cssFilters&&FiltersEnabled) {   
         for(Index=28; Index<31; Index++) { TipLayer2.filters[Index].enabled = 0 }
         for(s=0; s<28; s++) { if(TipLayer2.filters[s].status == 2) TipLayer2.filters[s].stop() }
         if(tbody.Transition == 51) tbody.Transition = parseInt(Math.random()*50)
         var applyTrans = (tbody.Transition>-1&&tbody.Transition<24&&tbody.Duration>0)? 1:0
         var advFilters = (tbody.Transition>23&&tbody.Transition<51&&tbody.Duration>0)? 1:0
         var which = (applyTrans)?0:(advFilters)? tbody.Transition-23:0
         if(tbody.Alpha>0&&tbody.Alpha<100) {
              TipLayer2.filters[28].enabled = 1
              TipLayer2.filters[28].opacity = tbody.Alpha
         }
         if(tbody.ShadowColor&&tbody.ShadowType == "simple") {
              TipLayer2.filters[29].enabled = 1
              TipLayer2.filters[29].color = tbody.ShadowColor
         }
         else if(tbody.ShadowColor&&tbody.ShadowType == "complex") {
              TipLayer2.filters[30].enabled = 1
              TipLayer2.filters[30].color = tbody.ShadowColor
         }
         if(applyTrans||advFilters) {
            eval(obj+sv+hl)
              if(applyTrans) TipLayer2.filters[0].transition = tbody.Transition
              TipLayer2.filters[which].duration = tbody.Duration
              TipLayer2.filters[which].apply()
         }
      }
      eval(obj+sv+vl)
      if(cssFilters&&FiltersEnabled&&(applyTrans||advFilters)) TipLayer2.filters[which].play()
      if(hs == "sticky") move=0
     }
}

function stickyhide() {
   eval(HideTip)
}

function ReloadTip() {
    if(nn4&&(evlw!=eval(ww)||evlh!=eval(wh))) location.reload()
    else if(hs == "sticky") eval(HideTip)
}

function htm() {
   if(sNav) {
      if(hs!="keep") {
         move=0;
         if(hs!="sticky") eval(HideTip)
      }   
   }
}


//-->


Here is the style.js:

Code:
/*
Please refer to readme.html for full Instructions

Text[...]=[title,text]

Style[...]=[TitleColor,TextColor,TitleBgColor,TextBgColor,TitleBgImag,TextBgImag,TitleTextAlign,TextTextAlign, TitleFontFace, TextFontFace, TipPosition, StickyStyle, TitleFontSize, TextFontSize, Width, Height, BorderSize, PadTextArea, CoordinateX , CoordinateY, TransitionNumber, TransitionDuration, TransparencyLevel ,ShadowType, ShadowColor]
*/

var FiltersEnabled = 1 // if your not going to use transitions or filters in any of the tips set this to 0

Text[0]=["Performance","Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam tincidunt auctor wisi. Nulla laoreet diam id arcu. Aenean sagittis bibendum erat. In hac habitasse platea dictumst. Nullam scelerisque nunc at nibh porttitor malesuada. Nam convallis pellentesque dui. Duis vel arcu. Cras placerat viverra libero. Etiam egestas elit eget neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur facilisis accumsan purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin imperdiet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce quis ante sed purus blandit tincidunt. Proin blandit elit a libero."]
Text[1]=["Behaviour","Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam tincidunt auctor wisi. Nulla laoreet diam id arcu. Aenean sagittis bibendum erat. In hac habitasse platea dictumst. Nullam scelerisque nunc at nibh porttitor malesuada. Nam convallis pellentesque dui. Duis vel arcu. Cras placerat viverra libero. Etiam egestas elit eget neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur facilisis accumsan purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin imperdiet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce quis ante sed purus blandit tincidunt. Proin blandit elit a libero."]
Text[2]=["Process","Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam tincidunt auctor wisi. Nulla laoreet diam id arcu. Aenean sagittis bibendum erat. In hac habitasse platea dictumst. Nullam scelerisque nunc at nibh porttitor malesuada. Nam convallis pellentesque dui. Duis vel arcu. Cras placerat viverra libero. Etiam egestas elit eget neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur facilisis accumsan purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin imperdiet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce quis ante sed purus blandit tincidunt. Proin blandit elit a libero."]
Text[3]=["Mission Leadership","Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam tincidunt auctor wisi. Nulla laoreet diam id arcu. Aenean sagittis bibendum erat. In hac habitasse platea dictumst. Nullam scelerisque nunc at nibh porttitor malesuada. Nam convallis pellentesque dui. Duis vel arcu. Cras placerat viverra libero. Etiam egestas elit eget neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur facilisis accumsan purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin imperdiet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce quis ante sed purus blandit tincidunt. Proin blandit elit a libero."]

Style[0]=["#FFFFFF","#0466AF","#FDB35D","#F8F9FA","","","","","","","float","sticky","","",200,"",1,10,650,170,48,1,0,"",""]
Style[1]=["#FFFFFF","#0466AF","#3DC900","#F8F9FA","","","","","","","float","sticky","","",200,"",1,10,650,170,48,1,0,"",""]
Style[2]=["#FFFFFF","#0466AF","#EB2A2A","#F8F9FA","","","","","","","float","sticky","","",200,"",1,10,650,170,48,1,0,"",""]
Style[3]=["#FFFFFF","#0466AF","#0034AB","#F8F9FA","","","","","","","float","sticky","","",200,"",1,10,650,170,48,1,0,"",""]


applyCssFilter()



This is the page when I tried to put milonic in...when I did the tooltip didn't display:

Pagewithmilonic.htm:

Code:
<html>
<head>
<title>Mission Leadership</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<!-- RollOver Script -->
<script language="JavaScript">
<!--

<!--
// loading images:
if (((navigator.appName == "Netscape") &&
(parseInt (navigator.appVersion) >=3 )) ||
((navigator.appName == "Microsoft Internet Explorer") &&
(parseInt (navigator.appVersion) >=4 )))
{//AC buttons
a1 = new Image
a1.src = "images/img_1.gif"
a2 = new Image
a2.src = "images/img_2.gif"
a3 = new Image
a3.src = "images/img_4.gif"
a4 = new Image
a4.src = "images/img_0.gif"

c1 = new Image
c1.src = "images/img_1_over.gif"
c2 = new Image
c2.src = "images/img_2_over.gif"
c3 = new Image
c3.src = "images/img_4_over.gif"
c4 = new Image
c4.src = "images/img_0_over.gif"


}
// The Roll over function:
function hiLight(imgID,imgName) {if (((navigator.appName == "Netscape") &&
(parseInt (navigator.appVersion) >=3 )) ||
((navigator.appName == "Microsoft Internet Explorer") &&
(parseInt (navigator.appVersion) >=4 )))
{document.images[imgID].src = eval(imgName + ".src");}}
// -->
//-->
</script>
<!-- end RollOver Script -->

<SCRIPT language="JavaScript1.2" src="main.js" type="text/javascript"></SCRIPT>   
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<DIV id="TipLayer2" style="visibility:hidden;position:absolute;z-index:1000;top:-100;"></DIV>
<SCRIPT language="JavaScript1.2" src="style.js" type="text/javascript"></SCRIPT> 
<!--
    Milonic DHTML Website Navigation Menu Version 5.0+
    Copyright 2004 (c) Milonic Solutions Limited (UK). All Rights Reserved.
    Please visit http://www.milonic.com/ for more information.

    Although this software may have been freely downloaded, you must obtain a license before using it in any production environment.      
    The free use of this menu is only available for Non-Profit, Educational & Personal Web Sites who have obtained a license to use.
   
    Free, Commercial and Corporate Licenses are available from our website.
    You also need to include a link back to http://www.milonic.com/ if you use the free license.
   
    All Copyright notices MUST remain in place at ALL times.
    This includes the first three lines of this notice on every page that uses the menu.
    If you cannot comply with all of the above requirements, please contact us to arrange a license waiver.
-->   
   
<script type="text/javascript" src="milonic_src.js"></script>
   
<param copyright="JavaScript Menu by Milonic" value="http://www.milonic.com/"></param>
<script   type="text/javascript">

if(ns4)_d.write("<scr"+"ipt type=text/javascript src=mmenuns4.js><\/scr"+"ipt>");      
  else _d.write("<scr"+"ipt type=text/javascript src=mmenudom.js><\/scr"+"ipt>");

</script>
<script type="text/javascript" src="menu_data.js"></script>


<table border="0" align="center" cellpadding="0" cellspacing="0" class="mainTable">
  <tr>
    <td height="85" valign="top">
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td><a href="default.asp"><img src="images/img_logo.gif" alt="Mission Leadership" width="168" height="62" border="0"></a></td>
        </tr>
        <tr>
          <td height="23"><table width="100%" height="20" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td bgcolor="#07548E" align="left" valign="top" height="21" class="bgTopMenu">
                  <script>
                  with(milonic=new menuname("Main Menu")){
                  style=menuStyle;
                  top=155;
                  left=200;
                  alwaysvisible=1;
                  orientation="horizontal";
                  overfilter="";
                  position="relative";
                  aI("text=Home;url=default.asp;showmenu=Home;itemwidth=50px;align=center;");
                  aI("text=Who We Are;url=whoWeAre.asp;showmenu=WhoWeAre;itemwidth=90px;align=center;");
                  aI("text=Mission Leadership;url=missionLeadership.asp;showmenu=MissionLeadership;itemwidth=120px;align=center;");
                  aI("text=Mission Dashboard;url=missionDashboard.asp;showmenu=MissionDashboard;itemwidth=120px;align=center;");
                  aI("text=Press Centre;url=PressCentre.asp;showmenu=PressCentre;itemwidth=90px;align=center;");
                  aI("text=Contact Us;url=contactUs.asp;showmenu=ContactUs;itemwidth=90px;align=center;");      
                  }
                  drawMenus();      
                  </script>
                </td>
              </tr>
            </table></td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td height="100%" valign="top"> <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td height="100%" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="4">
              <tr>
                <td> <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td class="breadcrumbsBg"><img src="images/img_breadcrumbArrows.gif" width="22" height="17" border="0" align="absmiddle"><a href="missionLeadership.asp" class="breadcrumbs">Mission
                        Leadership</a> </td>
                    </tr>
                  </table></td>
              </tr>
              <tr>
                <td valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td width="190" valign="top">
                        <table width="190" border="0" cellspacing="0" cellpadding="0">
                          <tr>
                            <td><img src="images/img_vision.jpg" width="190" height="121" border="0"></td>
                          </tr>
                          <tr>
                            <td class="topSublinkBgActive"><img src="images/img_blueArrow.gif" width="16" height="14" border="0" align="absbottom"><a href="missionLeadership.asp" class="topSublinkActive">Mission
                              Leadership </a></td>
                          </tr>
                          <tr>
                            <td height="10" valign="middle" class="sublinkBg"><img src="images/img_blueArrow.gif" width="16" height="14" border="0" align="absmiddle"><a href="behaviours.asp" class="sublink">Behaviours</a></td>
                          </tr>
                          <tr>
                            <td valign="middle" class="sublinkBg"><img src="images/img_blueArrow.gif" width="16" height="14" border="0" align="absmiddle"><a href="process.asp" class="sublink">Process</a></td>
                          </tr>
                          <tr>
                            <td valign="middle" class="sublinkBg"><a href="performance.asp" class="sublink"><img src="images/img_blueArrow.gif" width="16" height="14" border="0" align="absmiddle">Performance</a></td>
                          </tr>
                          <tr>
                            <td valign="top">&nbsp;</td>
                          </tr>
                        </table>
                      </td>
                      <td width="20" valign="top">&nbsp;</td>
                      <td valign="top"><table width="100%" border="0" cellspacing="2" cellpadding="2">
                          <tr>
                            <td class="heading1">Mission Leadership</td>
                          </tr>
                          <tr>
                            <td valign="top" class="content"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                  <td valign="top" class="contentSpacing"></td>
                                </tr>
                                <tr>
                                  <td align="center" valign="top" class="contentSpacing"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                      <tr>
                                        <td>&nbsp;</td>
                                        <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                            <tr>
                                              <td width="280"> <table width="280" border="0" cellspacing="0" cellpadding="0">
                                                  <tr>
                                                    <td width="280" height="285" valign="top">
                                                      <table width="280" height="290" border="0" cellpadding="0" cellspacing="0">
                                                        <tr>
                                                          <td height="183" rowspan="2" valign="top"><a href="process.asp" onMouseOver="stm(Text[2],Style[2]);hiLight('process','c1')" onMouseOut="htm();hiLight('process','a1')" onFocus="if(this.blur)this.blur()"><img src="images/img_1.gif" name="process" width="85" height="183" border="0" id="process"></a></td>
                                                          <td height="83"><a href="behaviours.asp" onMouseOver="stm(Text[1],Style[1]);hiLight('behaviour','c2')" onMouseOut="htm();hiLight('behaviour','a2')" onFocus="if(this.blur)this.blur()"><img src="images/img_6.gif" width="100" height="83" border="0"><img src="images/img_2.gif" name="behaviour" width="95" height="83" border="0" id="behaviour"></a></td>
                                                        </tr>
                                                        <tr>
                                                          <td width="195" height="100"><a href="missionLeadership.asp" onMouseOver="stm(Text[3],Style[3]);hiLight('missionLeadership','c4')" onMouseOut="htm();hiLight('missionLeadership','a4')" onFocus="if(this.blur)this.blur()"><img src="images/img_0.gif" name="missionLeadership" width="195" height="100" border="0" id="missionLeadership"></a></td>
                                                        </tr>
                                                        <tr>
                                                          <td height="89" colspan="2" valign="top"><table width="280" border="0" cellspacing="0" cellpadding="0">
                                                              <tr>
                                                                <td width="155" height="107"><img src="images/img_5.gif" width="155" height="107" border="0"></td>
                                                                <td width="125" height="107"><a href="performance.asp" onMouseOver="stm(Text[0],Style[0]);hiLight('performance','c3')" onMouseOut="htm();hiLight('performance','a3')" onFocus="if(this.blur)this.blur()"><img src="images/img_4.gif" name="performance" width="125" height="107" border="0" id="performance"></a></td&