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

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:00

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

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

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 GMT

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 GMT

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 GMT

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 GMT

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 GMT

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 GMT

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 GMT

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 GMT

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 GMT

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 GMT

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>
                                                              </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 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();

By the way. Thank you for all your help. I really appreciate everything. I really didn't expect a reply today especially during the festive season. What are your support hours so that I don't bug you until then?

Thanks!

Poster: Ruth
Dated: Saturday December 25 2004 - 21:52:17 GMT

Thanks so much for the compliment! We are here all different hours. Post any time you have a problem and hopefully someone will see and be able to respond. We are volunteers who just love this menu. I think it's the best thing out there!

I'm going to post here so that what you want to do is really clear and hopefully one of the guys who is function literate will be able to help. I'm still working on it, but it may need a function, or not

I've never done the image map, nor the pop function menu so it's new to me and may take awhile. In the meantime perhaps someone else reading this will be able to help. I believe you said you purchased the menu so, if we can't figure it out, you might have to contact support. I know what you want to do and I'm sure there's a way to do it either with the pop function or with the tootips, and once set up it would be easy to use and edit.

EXISTING PAGE has a div

Code:

<DIV id="TipLayer2" style="visibility:hidden;position:absolute;z-index:1000;top:-100;border-style:solid;border-width:2px;border-color:#FFCC66;"></DIV> 

1. The div is positioned at the right side of the table in which the images that trigger the tip are contained. There's no main table size listed so I dont' know if it is given or if it's 100% and will change with resolution size and what that does to the position of the div though I have to assume that it somehow changes and positions correctly as the table changes if it does.

2. Each tip opens in this div

3. The tip opens onMouseOver but doesn't close until the word Close is clicked.

4. Each 'tip' has a layout that looks like a header at the top and the tip below. In the 'header' the Title is at the left and the word Close at the right and the tip below, like having aI(text=title [at the left of the header [spaces]Close [at the right of the header and a link;type=header");aI(text=all tip info)

5. Each tip has it's own header color.

Merry Christmas

Ruth

Tooltips

Poster: webdragon
Dated: Sunday December 26 2004 - 17:39:58 GMT

Hi Ruth,

Thanks for all your help and hopefully we'll get it right, otherwise hopefully someone might be able to help. Sorry, I actually meant my client bought the Milonic menu after I had built the dynamicdrive menu. The dynamicdrive menu I downloaded for free, and I kept trying to contact the author, and he hasn't replied.

I tried the image map sample, and its pretty close to how I would like the page to look. But, the only thing is I would like it to display like the other dynamic Tooltip, on the right of the table, with all the tooltips displaying in the same position.

Do you think Milonics tooltips can do this or do you think we should concentrate on getting the other script to work with milonic first? Please give me a shout if you would like me to paste the other script in.

Thanks! All the best...

Poster: Ruth
Dated: Sunday December 26 2004 - 20:55:18 GMT

No, I don't need the other script. We wouldn't work on someone else's menu program. If your client has purchased the menu, then you should be able to contact Milonic with that license number if we aren't able to resolve something here.

One thing I don't have to be able to see what the page does is the style for the main table. Does it remain one size? Does it remain at the center? It's hard to work on position with regard to the menu if we don't know what happens to the table, how it renders and changes in size and position.

Ruth

Tooltips

Poster: webdragon
Dated: Sunday December 26 2004 - 21:48:01 GMT

Hi Ruth,

I meant me pasting in the Milonic image map script I've been working on, just to make it less work for you! I have pasted the code in below. All I think that is left to do, if possible, is for the tooltips to display on the right of the images in a table cell. If we could get that right, then that will be great. A huge big bonus would be if they could display long enough with a close button to close it.

The table at the moment is set at 100% and is within the main outer table which is also set at 100%. But if it will make it easier, must we change the table with the images and tooltips to a fixed size?

The cell with the images in, is 280x290 pixels. The table cell on the right of the images where the tooltips could display can be 200 pixels - it should be just enough room for the tooltips.

Tooltips.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>


<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;
                  menuwidth="100%";
                  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="popup('MnuProcess',1);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="popup('MnuBehaviours',1);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="popup('MnuMissionLeadership',1);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="popup('MnuPerformance',1);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>

css/styles.css: (I'm so sorry i forgot to paste it in earlier!)

Code:

/* =-=-=-=-=-=-=-[Page Formatting]-=-=-=-=-=-=-=- */
body{
   background-color: #CCCCCC;
   padding: 0px;
   margin-top: 0px;
   margin-bottom: 0px;
}
.bgTopMenu{
   background: url(../images/img_bgTopMenu.gif) repeat;
   height:21px;
}
a:link{
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 10px;
   color: #0066B3;
   font-weight:regular;
   text-decoration:none;
}
a:active{
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 10px;
   color: #3DC900;
   font-weight:regular;
   text-decoration:none;
}
a:visited{
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 10px;
   color: #0066B3;
   font-weight:regular;
   text-decoration:none;
}
a:hover{
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 10px;
   color: #3DC900;
   font-weight:regular;
   text-decoration:underline;
}

input{
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 10px;
   color: #000000;
}

select{
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 10px;
   color: #000000;
}

.heading1{
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 14px;
   color: #0066B3;
   font-weight:bold;
}

.heading2{
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 11px;
   font-weight: bold;
   color: #3DC900;
}
.heading3{
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 10px;
   font-weight: bold;
   color: #4E6979;
}
.h1Green{
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 14px;
   color: #3DC900;
   font-weight:bold;
}
.tdRowSpacing{
   height:5px;
}
.content{
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 10px;
   color: #4E6979;
}

.contentSpacing{
   height:10px;
}

ul{
   list-style-image: url(../images/img_bullet1.gif);
   padding-bottom:0px;
}

.summaryParagraph{
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 10px;
   color: #0066B3;
   border-left: 3px solid #0066B3;
   font-weight: bold;
   background-color: #E6F4FF;
   padding: 5px;
}

.hr{
   background-image: url(../images/img_hr.gif);
   height: 15px;
}

.mainTable{
   width: 100%;
   height: 100%;
   border-left: 1px solid #0066B3;
   border-right: 1px solid #0066B3;
   background-color: #FFFFFF;
}
/* =-=-=-=-=-=-=-[End Page Formatting]-=-=-=-=-=-=-=- */



/* =-=-=-=-=-=-=-[Main Menu Links]-=-=-=-=-=-=-=- */
.mainMenuBg{
   background-color: #002A8A;
   height: 23px;
   padding: 3px;
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 10px;
   color: #FFFFFF;
   text-decoration: none;
   letter-spacing: 1px;   
}

a.mainMenu:link{
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 10px;
   color: #FFFFFF;
   text-decoration: none;
   letter-spacing: 1px;
}

a.mainMenu:active{
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 10px;
   color: #FFFFFF;
   text-decoration: none;
   letter-spacing: 1px;   
}

a.mainMenu:visited{
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 10px;
   color: #FFFFFF;
   text-decoration: none;
   letter-spacing: 1px;   
}

a.mainMenu:hover{
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 10px;
   color: #FFFFFF;
   text-decoration: underline;
   letter-spacing: 1px;   
}

/* =-=-=-=-=-=-=-[End Main Menu Links]-=-=-=-=-=-=-=- */


/* =-=-=-=-=-=-=-[Footer]-=-=-=-=-=-=-=- */
.footerBg{
   background-color: #E8EBED;
   height: 25px;
   padding: 3px;
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 10px;
   color: #0066B3;
   text-decoration: none;
   border-top: 1px solid #0066B3;
   border-bottom: 1px solid #FFFFFF;
}

a.footer:link{
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 10px;
   color: #0066B3;
   text-decoration: none;
}

a.footer:active{
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 10px;
   color: #0066B3;
   text-decoration: none;
}

a.footer:visited{
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 10px;
   color: #0066B3;
   text-decoration: none;
}

a.footer:hover{
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 10px;
   color: #002A8A;
   text-decoration: underline;
}

/* =-=-=-=-=-=-=-[End Footer]-=-=-=-=-=-=-=- */


/* =-=-=-=-=-=-=-[Breadcrumbs]-=-=-=-=-=-=-=- */
.breadcrumbsBg{
   background-color: #0066B3;
   height: 20px;
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 10px;
   color: #FFFFFF;
   text-decoration: none;
}

a.breadcrumbs:link{
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 10px;
   color: #FFFFFF;
   text-decoration: none;
}

a.breadcrumbs:active{
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 10px;
   color: #FFFFFF;
   text-decoration: none;
}

a.breadcrumbs:visited{
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 10px;
   color: #FFFFFF;
   text-decoration: none;
}

a.breadcrumbs:hover{
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 10px;
   color: #FFFFFF;
   text-decoration: underline;
}
/* =-=-=-=-=-=-=-[End Breadcrumbs]-=-=-=-=-=-=-=- */


/* =-=-=-=-=-=-=-[Top SubLink]-=-=-=-=-=-=-=- */

.topSublinkBg{
   background-color: #FFFFFF;
   height: 30px;
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 10px;
   color: #0066B3;
   text-decoration: none;
   border-bottom: dashed 1px #DCDCDC;
   border-top: dashed 1px #DCDCDC;
}

a.topSublink:link{
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 11px;
   color: #0066B3;
   font-weight: bold;
   text-decoration: none;
}

a.topSublink:active{
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 11px;
   color: #0066B3;
   font-weight: bold;   
   text-decoration: none;
}

a.topSublink:visited{
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 11px;
   color: #0066B3;
   font-weight: bold;   
   text-decoration: none;
}

a.topSublink:hover{
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 11px;
   color: #3DC900;
   font-weight: bold;   
   text-decoration: underline;
}

/* =-=-=-=-=-=-=-[End TopSubLink]-=-=-=-=-=-=-=- */


/* =-=-=-=-=-=-=-[Top SubLink Active]-=-=-=-=-=-=-=- */

.topSublinkBgActive{
   background-color: #F8F9FA;
   height: 30px;
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 10px;
   color: #3DC900;
   text-decoration: none;
   border-bottom: dashed 1px #DCDCDC;
   border-top: dashed 1px #DCDCDC;
}

a.topSublinkActive:link{
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 11px;
   color: #3DC900;
   font-weight: bold;
   text-decoration: none;
}

a.topSublinkActive:active{
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 11px;
   color: #3DC900;
   font-weight: bold;   
   text-decoration: none;
}

a.topSublinkActive:visited{
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 11px;
   color: #3DC900;
   font-weight: bold;   
   text-decoration: none;
}

a.topSublinkActive:hover{
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 11px;
   color: #0066B3;
   font-weight: bold;   
   text-decoration: underline;
}

/* =-=-=-=-=-=-=-[End TopSubLink Active]-=-=-=-=-=-=-=- */

/* =-=-=-=-=-=-=-[Top SubLink]-=-=-=-=-=-=-=- */

.sublinkBg{
   background-color: #FFFFFF;
   height: 30px;
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 10px;
   color: #0066B3;
   text-decoration: none;
   border-bottom: dashed 1px #DCDCDC;
   border-top: dashed 1px #DCDCDC;
   padding-left: 30px;
}
.sublinkBgActive{
   background-color: #F8F9FA;
   height: 30px;
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 10px;
   color: #3DC900;
   text-decoration: none;
   border-bottom: dashed 1px #DCDCDC;
   border-top: dashed 1px #DCDCDC;
   padding-left: 30px;   
   }

a.sublink:link{
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 11px;
   color: #0066B3;
   font-weight: bold;
   text-decoration: none;
}

a.sublink:active{
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 11px;
   color: #0066B3;
   font-weight: bold;   
   text-decoration: none;
}

a.sublink:visited{
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 11px;
   color: #0066B3;
   font-weight: bold;   
   text-decoration: none;
}

a.sublink:hover{
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 11px;
   color: #3DC900;
   font-weight: bold;   
   text-decoration: underline;
}

/* =-=-=-=-=-=-=-[End TopSubLink]-=-=-=-=-=-=-=- */

/* =-=-=-=-=-=-=-[News Section]-=-=-=-=-=-=-=- */
.newsItemBg{
   border-bottom: dashed 1px #DCDCDC;
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 10px;
   color: #0066B3;
   font-weight: bold;
   text-decoration: none;
   padding: 5px;
}

a.newsItem:link{
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 10px;
   color: #0066B3;
   font-weight: bold;
   text-decoration: none;
}

a.newsItem:active{
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 10px;
   color: #0066B3;
   font-weight: bold;
   text-decoration: none;
}

a.newsItem:visited{
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 10px;
   color: #0066B3;
   font-weight: bold;
   text-decoration: none;
}

a.newsItem:hover{
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 10px;
   color: #0066B3;
   font-weight: bold;
   text-decoration: underline;
}

.newsText{
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 10px;
   color: #0066B3;
   font-weight: regular;
   text-decoration: none;
}


/* =-=-=-=-=-=-=-[End News Section]-=-=-=-=-=-=-=- */


/* =-=-=-=-=-=-=-[Tooltip]-=-=-=-=-=-=-=- */

.TooltipTable{
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 10px;
   color: #0066B3;
   font-weight: regular;
   text-decoration: none;
   background-color: #F8F9FA;
   border: 1px solid #0066B3;
   width: 174px;
   padding: 5px;
}
.tooltipFooter{
   font-family: Verdana, Arial,Helvetica, sans-serif;
   font-size: 10px;
   color: #FFFFFF;
   background-color: #0066B3;
   width: 174px;
   height: 30px;
   font-weight: regular;
   text-decoration: none;
   padding: 5px;
}
/* =-=-=-=-=-=-=-[End Tooltip]-=-=-=-=-=-=-=- */

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;
}

// Image Map Tooltips //

with(TT_Behaviours=new mm_style()){
onbgcolor="#F8F9FA";
oncolor="#62D330";
offbgcolor="#F8F9FA";
offcolor="#0466AF";
bordercolor="#0466AF";
borderstyle="solid";
borderwidth=1;
padding=2;
fontsize="10px";
fontstyle="normal";
fontweight="normal";
fontfamily="Verdana, Tahoma, Arial, Helvetica, sans-serif";
pagecolor="#FFFFFF";
pagebgcolor="#FFFFFF";
headercolor="#FFFFFF";
headerbgcolor="#62D330";
}

with(TT_Process=new mm_style()){
onbgcolor="#F8F9FA";
oncolor="#EB2A2A";
offbgcolor="#F8F9FA";
offcolor="#0466AF";
bordercolor="#0466AF";
borderstyle="solid";
borderwidth=1;
padding=2;
fontsize="10px";
fontstyle="normal";
fontweight="normal";
fontfamily="Verdana, Tahoma, Arial, Helvetica, sans-serif";
pagecolor="#FFFFFF";
pagebgcolor="#FFFFFF";
headercolor="#FFFFFF";
headerbgcolor="#EB2A2A";
}

with(TT_MissionLeadership=new mm_style()){
onbgcolor="#F8F9FA";
oncolor="#1142B1";
offbgcolor="#F8F9FA";
offcolor="#0466AF";
bordercolor="#0466AF";
borderstyle="solid";
borderwidth=1;
padding=2;
fontsize="10px";
fontstyle="normal";
fontweight="normal";
fontfamily="Verdana, Tahoma, Arial, Helvetica, sans-serif";
pagecolor="#FFFFFF";
pagebgcolor="#FFFFFF";
headercolor="#FFFFFF";
headerbgcolor="#1142B1";
}

with(TT_Performance=new mm_style()){
onbgcolor="#F8F9FA";
oncolor="#FDAE53";
offbgcolor="#F8F9FA";
offcolor="#0466AF";
bordercolor="#0466AF";
borderstyle="solid";
borderwidth=1;
padding=2;
fontsize="10px";
fontstyle="normal";
fontweight="normal";
fontfamily="Verdana, Tahoma, Arial, Helvetica, sans-serif";
pagecolor="#FFFFFF";
pagebgcolor="#FFFFFF";
headercolor="#FFFFFF";
headerbgcolor="#FDAE53";
}

with(TT_BehavioursSub=new mm_style()){
onbgcolor="#F8F9FA";
oncolor="#62D330";
offbgcolor="#F8F9FA";
offcolor="#0466AF";
bordercolor="#0466AF";
borderstyle="solid";
borderwidth=1;
padding=2;
fontsize="10px";
fontstyle="normal";
fontweight="normal";
fontfamily="Verdana, Tahoma, Arial, Helvetica, sans-serif";
pagecolor="#FFFFFF";
pagebgcolor="#FFFFFF";
headercolor="#FFFFFF";
headerbgcolor="#62D330";
}

with(milonic=new menuname("MnuBehavioursSub")){
style=TT_BehavioursSub;
borderwidth=1;
aI("text=Dummy Menu Item 1;");
aI("text=Dummy Menu Item 2;");
aI("text=Dummy Menu Item 3;");
}

with(milonic=new menuname("MnuBehaviours")){
style=TT_Behaviours;
borderwidth=1;
aI("text=Behaviours;type=header;align=center;");
aI("image=france.gif;imagealign=center;type=header;align=center;");
aI("text=Country: <i><b>France</b></i>;");
aI("text=Language: <i><b>French</b></i>;");
aI("text=Capitol City: <i><b>Paris</b></i>;");
aI("text=Latitude: <i><b>45n45</b></i>;");
aI("text=Longitude: <i><b>4e51</b></i>;");
aI("text=Sub Menus Are allowed;showmenu=MnuBehavioursSub;");
}

with(milonic=new menuname("MnuProcess")){
style=TT_Process;
borderwidth=1;
aI("text=Process;type=header;align=center;");
aI("image=scotland.gif;imageposition=center;imagealign=center;type=header;align=center;");
aI("text=Country: <b><i>Scotland</i></b>;");
aI("text=Language: <b><i>English/Gaelic</i></b>;");
aI("text=Capitol City: <b><i>Edinburgh</i></b>;");
aI("text=Latitude: <b><i>55n53</i></b>;");
aI("text=Longitude: <b><i>4w15</i></b>;");
aI("text=Sub Menus Are allowed;");
}

with(milonic=new menuname("MnuMissionLeadership")){
style=TT_MissionLeadership;
borderwidth=1;
aI("text=MissionLeadership;type=header;align=center;");
aI("image=france.gif;imagealign=center;type=header;align=center;");
aI("text=Country: <i><b>France</b></i>;");
aI("text=Language: <i><b>French</b></i>;");
aI("text=Capitol City: <i><b>Paris</b></i>;");
aI("text=Latitude: <i><b>43n36</b></i>;");
aI("text=Longitude: <i><b>1e26</b></i>;");
aI("text=Sub Menus Are allowed;");
}

with(milonic=new menuname("MnuPerformance")){
style=TT_Performance;
borderwidth=1;
aI("text=Performance;type=header;align=center;");
aI("image=france.gif;imagealign=center;type=header;align=center;");
aI("text=Country: <i><b>France</b></i>;");
aI("text=Language: <i><b>French</b></i>;");
aI("text=Capitol City: <i><b>Paris</b></i>;");
aI("text=Latitude: <i><b>43n25</b></i>;");
aI("text=Longitude: <i><b>5e13</b></i>;");
aI("text=Sub Menus Are allowed;");
}


drawMenus();

Tooltips.js file - I can't remember if we need this?:

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
   }
}

Do you need the milonic_src.js, mmenudom.js, mmenuns4.js files?

Thanks!
& Speak to you soon!

Poster: John
Dated: Monday December 27 2004 - 5:17:18 GMT

webdragon wrote:

Do you need the milonic_src.js, mmenudom.js, mmenuns4.js files?

Not posted here, but please provide the exact version you are running, and ensure that all 3 files are running the same version.

Tooltips

Poster: webdragon
Dated: Monday December 27 2004 - 14:55:00 GMT

Hi John,

It is version 5 and they are all running the same version.

Thanks

Poster: John
Dated: Monday December 27 2004 - 16:21:00 GMT

Hi Web -

5.what - exactly?

Tooltips

Poster: webdragon
Dated: Monday December 27 2004 - 18:07:51 GMT

Sorry John,

I don't think I'm understanding you...I downloaded the image map example. Is that the information you need? I did paste in all the files in the previous post.

Thanks

Poster: Ruth
Dated: Monday December 27 2004 - 19:58:21 GMT

Hi dragon,
If you just downloaded the image map then you should have version 5.65. In the milonic_src.js file it should give you the exact version.

There is a section on the site that has information on methods and fucntions. I am not function literate so I do not know how to create anything like that, but I know that there is information about getting and setting a menu position so perhaps that will help you. [url]http://www.milonic.com/menu_methods.php[/url] There is also a discussion about pulling the X coordinate[url]http://www.milonic.com/forum/viewtopic.php?t=3632[/url]which has something to do with positioning. There is also this topic about position pop menus [url]http://www.milonic.com/forum/viewtopic.php?p=22668[/url]

Hopefully some of this will help, and I'll keep seeing what I can find. You can set the top and left in offsets for the pop menus top="offset=whateverpx"; left="offset=whateverpxs"; The problem with tis is that if you get it set say at 800x600, if the resolution changes then the offsets are not correct anymore.

Ruth

Thanks Ruth

Poster: webdragon
Dated: Monday December 27 2004 - 22:02:59 GMT

Hi Ruth,

Thanks so much, I'll also play around and see what happens.

Thanks for all your help

Poster: webdragon
Dated: Tuesday December 28 2004 - 9:41:45 GMT

Hi Ruth,

You're an angel for helping me. I was halfway through your code when Andy from Milonic replied to my origional support question (better late than never hey!)

I will copy the code below:
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="#F8F9FA";
oncolor="#3DC900";
offbgcolor="#FFFFFF";
offcolor="#0066B3";
separatorcolor="#DCDCDC";
separatorsize="1";
separatorwidth=190;
separatorheight=25;
separatorimage="images/img_separator.gif";
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;
}

// Tooltips for the Mission Leadership Page//

with(tabStyles=new mm_style()){
fontsize="10px";
fontweight="bold";
fontfamily="Verdana, Arial, Tahoma, Sans-Serif";
headercolor="#FFFFFF";
borderwidth=1
borderstyle="solid"
offcolor="#0466AF"
offbgcolor="#F8F9FA"
padding=2
overfilter="Fade(duration=0.2);Alpha(opacity=90);";
outfilter="randomdissolve(duration=0.3)";

}

PerformanceTabStyle=new copyOf(tabStyles)
PerformanceTabStyle.bordercolor="#FDB35D";
with(milonic=new menuname("PerformanceTab")){
top=170
left=520
itemwidth=200
style=PerformanceTabStyle;
aI("text=Performance;type=header;headerbgcolor=#FDB35D")
aI("text=This is where you edit the text.;padding=12");
aI("image=images/TooltipImage.jpg;imagealign=center;type=header;align=center;");
aI("text= ;padding=12");
}


BehaviourTabStyle=new copyOf(tabStyles)
BehaviourTabStyle.bordercolor="#3DC900";
with(milonic=new menuname("BehaviourTab")){
top=170
left=520
itemwidth=200
style=BehaviourTabStyle;
aI("text=Behaviours;type=header;headerbgcolor=#3DC900")
aI("text=This is where you edit the text.;padding=12");
}


ProcessTabStyle=new copyOf(tabStyles)
ProcessTabStyle.bordercolor="#EB2A2A";
with(milonic=new menuname("ProcessTab")){
top=170
left=520
itemwidth=200
style=ProcessTabStyle;
aI("text=Process;type=header;headerbgcolor=#EB2A2A")
aI("text=This is where you edit the text.;padding=12");
}


MissionTabStyle=new copyOf(tabStyles)
MissionTabStyle.bordercolor="#0034AB";
with(milonic=new menuname("MissionTab")){
top=170
left=520
itemwidth=200
style=MissionTabStyle;
aI("text=Mission;type=header;headerbgcolor=#0034AB")
aI("text=This is where you edit the text.;padding=12");
}



drawMenus();

I'm pretty happy with this, so please don't worry about working on the problem further. Again thanks for all the effort you put in!

I have another question on separator images, and have posted it in the forum but I hope you don't mind if I ask it here?

You know on the left of my page, I have a submenu. Well I am trying to put separator images in...little dashes.

I put separatorimage=img_separator.gif but it just doesn't display. It is in the code above as I am still working on it. Can you see if I'm doing anything wrong?

Thanks!

Poster: Ruth
Dated: Tuesday December 28 2004 - 17:54:30 GMT

Hi WebDragon,
Glad you got the solution!

As to the images, I couldn't find the post at first, it's not in the support forum. Could you post the question as a new topic here in this forum and delete your post from the image forum? I think you would get a quicker response here in the support forum. That forum was put up for requesting images that you might want.

Ruth