Sample:
<style> <!-- .BorderOn { width:90px; margin-left:10px; border:1px solid #456789 } .BorderOff { width:90px; margin-left:0px; border:1px solid #444444 } A.mBlue:link {color:#00CCFF; text-decoration:none;} A.mBlue:visited {color:#00CCFF; text-decoration:none;} A.mBlue:active {color:#00CCFF; text-decoration:none;} A.mBlue:hover {color:#FF0000; text-decoration:underline;} A.mGreen:link {color:#aaaaaa; text-decoration:none;} A.mGreen:visited {color:#aaaaaa; text-decoration:none;} A.mGreen:active {color:#aaaaaa; text-decoration:none;} A.mGreen:hover {color:#FF0000; text-decoration:underline;} A.mYellow:link {color:#FFFF00; text-decoration:none;} A.mYellow:visited {color:#FFFF00; text-decoration:none;} A.mYellow:active {color:#FFFF00; text-decoration:none;} A.mYellow:hover {color:#FF0000; text-decoration:underline;} A.mPurple:link {color:#9966FF; text-decoration:none;} A.mPurple:visited {color:#9966FF; text-decoration:none;} A.mPurple:active {color:#9966FF; text-decoration:none;} A.mPurple:hover {color:#FF0000; text-decoration:underline;} //--> </style> <script language="JavaScript1.2"> <!-- offMessage = "Welkom bij velpzuid's..." function boxOn(which,message){ if (document.all||document.getElementById){ which.className='BorderOn' if (document.getElementById) {document.getElementById("Message").innerHTML = message} else {Message.innerHTML = message} } } function boxOff(which){ if (document.all||document.getElementById){ which.className='BorderOff' if (document.getElementById) {document.getElementById("Message").innerHTML = offMessage} else {Message.innerHTML = offMessage} } } //--> </script> </HEAD> <body bgcolor="#000000"> <!-- BEGINNING OF MENU //--> <!-- Outer Container Table //--> <!-- Set this table width to largest margin-left + largest width in <style> script //--> <table cellpadding="0" cellspacing="0" width="100"> <tr> <td align="center" width="100"> <!-- Header Table // --> <table cellpadding="3" cellspacing="0" bgcolor="#000000" class="BorderOff"> <tr> <td width="100"><b><font color="#8EA4BB" size="2" face="Verdana">Menu</font></b></td> </tr> </table> <font size="2" face="Verdana"> <!-- End Header Table //--> <!-- Menu Items Tables - To add more, just follow the pattern - Note class= in each <a href> to attach link style colors //--> <!-- Menu Item One Table //--> <center> <table cellpadding="3" cellspacing="0" class="BorderOff" onMouseover="boxOn(this,'Velp Zuid (VZP). Mainpage')" onMouseout="boxOff(this)"> <tr> <td><a class="mBlue" href="http://www.velpzuid.nl" target="_blank"><font color="#6986A5" size="2" face="Verdana">Startpagina</font></a></td> </tr> </table> <font size="2" face="Verdana" color="#6986A5"> <!-- Menu Item Two Table //--> </font> <table cellpadding="3" cellspacing="0" class="BorderOff" onMouseover="boxOn(this,'Wichhart Lathum BV.')" onMouseout="boxOff(this)"> <tr> <td><a class="mBlue" href="http://www.wichhart.nl/lathum/" target="_blank"><font color="#6986A5" size="2" face="Verdana">Wichhart</font></a></td> </tr> </table> <font size="2" face="Verdana" color="#6986A5"> <!-- Menu Item Three Table //--> </font> <table cellpadding="3" cellspacing="0" class="BorderOff" onMouseover="boxOn(this,'VZP Frames.')" onMouseout="boxOff(this)"> <tr> <td><a class="mGreen" href="http://www.velpzuid.nl/online/" target="_blank"><font color="#6986A5" size="2" face="Verdana">VelpZuid</font></a></td> </tr> </table> <font size="2" face="Verdana" color="#6986A5"> </font> <table cellpadding="3" cellspacing="0" class="BorderOff" onMouseover="boxOn(this,'Chack info pagina.')" onMouseout="boxOff(this)"> <tr> <td><a class="mYellow" href="http://www.velpzuid.nl/chack/" target="_blank"><font color="#6986A5" size="2" face="Verdana">Chack</font></a></td> </tr> </table> <font size="2" face="Verdana" color="#6986A5"> </font> <table cellpadding="3" cellspacing="0" class="BorderOff" onMouseover="boxOn(this,'..mail de VZP , Click here for the mailform')" onMouseout="boxOff(this)"> <tr> <td><a class="mYellow" href="http://www.velpzuid.nl/mail/" target="_blank"><font color="#6986A5" size="2" face="Verdana">Mail</font></a></td> </tr> </table> <font size="2" face="Verdana" color="#6986A5"> </font> <table cellpadding="3" cellspacing="0" class="BorderOff" onMouseover="boxOn(this,'..oke en als de site van Biertje.')" onMouseout="boxOff(this)"> <tr> <td><a class="mPurple" href="http://www.velpzuid.nl/biertje/" target="_blank"><font color="#6986A5" size="2" face="Verdana">Biertje</font></a></td> </tr> </table> <font size="2" face="Verdana"> <!-- End Menu Items Tables //--> <!-- Message Table //--> <!-- Set the width= of this table the same as the overall width in the <style> //--> </font> <table cellpadding="1" cellspacing="0" bgcolor="#444444" width="90"> <tr> <td> <!-- Set the width= of this table to the overall width in the style table minus 2x the border width; set the height= long (large) enough to accommodate your longest message //--> <table cellpadding="3" cellspacing="0" bgcolor="#000000" width="88" height="100"> <tr> <td align="left" valign="top"><font id="Message" color="#4D6580" size="2" face="Verdana">Welkom op mijn website...</font></td> </tr> </table> </td> </tr> </table> <!-- End Message Table //--> </td> </tr> </table> <!-- End Outer Container Table //--> <!-- END OF MENU //--> <!-- http://www.velpzuid.nl - Music & Website creators -->
