Member Avatar for Secret Agent

I am looking for the most basic hover over text tip javascript. I found some but were rather odd, one for example required a "transparenet image" therefore messing up the column width. Another didn't like me :)

I simply want perhaps a gray border/white background/charcoal gray font color (arial 9px) in the actual tip box.

I do not know how to code this other than copy/paste code itself

Anyhelp is appreciated. Thank you.

  • 4 Contributors
  • 8 Replies
  • 305 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by alpha_foobar
Member Avatar for tgreer

It's going to be difficult to help you with a coding issue if you don't write code!

Part of the issue is determining what, exactly, you want to "hover over". If you want to hover over an image or a hyperlink, then the basic is to supply the "alt" attribute. Modern browsers will automatically convert the text into the basic, default "tip".

Anything else will require DHTML knowledge.

Member Avatar for Secret Agent

Like I said in the subject/body I need to hover over text only. No images, just plain text. So if I put for example "control panel" text in a table field, I want a tip box to pop up right above it with description for control panel. That's basically it.

Any help is appreciated

Member Avatar for jpn311

This is very simple. First create a DIV with an id such as 'Tips1' and set it's visibility to hidden. Enter the text you want to be the tip. Then on the link you want the tip for set the onmouseover to a function that will display your DIV. You will also want an event for onmousemove to reposition the layer. And of course, you will need to set the onmouseout event for hiding the layer.

EX:

<div id="Tip1" style="position: absolute; width: 200px; left:385px; top:188px; visibility: hidden; z-index:1; padding: 4px; background-color: #FFFFCC; BORDER: 1px solid #000000">Your tip text here</div>

<a href="Javascript:void(0)" onmouseover="getLayer('Tip1')" onmousemove="floatLayer('Tip1')" onmouseout="hideLayer('Tip1')">Some text here</a>

<script language="Javascript">
function getLayer(SRC){
	var tDIV = document.getElementById(SRC)             
             tDIV.style.cursor = "hand"
	tDIV.style.visibility = "visible"
}
function floatLayer(SRC){
	var tDIV = document.getElementById(SRC)
             tDIV.style.top = window.event.clientY + 20
	if(window.event.clientX+200>document.body.clientWidth)
	{
		tDIV.style.left = document.body.clientWidth - 200
	}
	else
	{
		tDIV.style.left = window.event.clientX// + 15
	}
}	
function hideLayer(SRC){
	var tDIV = document.getElementById(SRC)
             tDIV.style.visibility='hidden'
}
</script>
Member Avatar for Secret Agent

Thank you. I put the script in the head section and the rest in body.

It worked in FrontPage preview but not on the site
Shows "javascript:void(0)" in the status bar when I hover over the text.

I have a CMS that I use and I put the script in the head section in the template.htm file as I've done for my other scripts so it is globaly on every page. I even tried only that page but nothing pops up.

Any suggestions?

Member Avatar for jpn311

I guess I should point out that my code was the IE version, but can be modified to work in other browsers as well. Regardless of your browser you should still be able to see the layer when mousing over. Are you getting any Javascript errors? Also, did you try putting my code in a page by itself exaclty as it is written above?

Member Avatar for Secret Agent

Yes, I am using IE and I inserted in its own page (actually product in the CMS) which should work. I do not get errors (aside what I said I see in status bar). It just does nothing.

Member Avatar for Secret Agent

Where is the proper place to place the script <script>...</script>?

I tried in head section of my CMS's template file (as I have other scripts there in the head section to make the others work, which they do). I even tried inside the CMS product page as shown below

<TABLE id=table69 cellSpacing=1 width="100%">
<TBODY>
<TR>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #404264; BORDER-BOTTOM-COLOR: #404264; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #404264; PADDING-TOP: 1px" borderColor=#404264 width=100 bgColor=#3b3d61 height=25><SPAN style="FONT-WEIGHT: 700"><FONT style="FONT-SIZE: 8pt" face=Arial color=#ffffff>Servers Include:</FONT></SPAN></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-BOTTOM-COLOR: #404264; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #404264; PADDING-TOP: 1px" borderColor=#404264 align=middle width=20 bgColor=#e2e2e2 height=25><FONT style="FONT-SIZE: 8pt" face=Arial color=#3b3d61>Info</FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-BOTTOM-COLOR: #404264; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #404264; PADDING-TOP: 1px" borderColor=#404264 width=40 bgColor=#ff8a15 height=25>
<P align=center><FONT style="FONT-SIZE: 8pt" face=Arial color=#3b3d61>Included</FONT></P></TD>
<TD align=middle rowSpan=38>
<TABLE id=table71 cellSpacing=5 width="100%" border=0>
<TBODY>
<TR>
<TD align=middle><IMG height=117 src="http://virtuosonetsolutions.com/images/services.gif" width=100 border=0></TD>
<TD><FONT style="FONT-SIZE: 8pt" face=Arial color=#404264><B>Virtuoso Support: 24/7 RapidFire™ Response<BR></B>The Virtuoso team is dedicated to providing you support not found elsewhere. We offer support via live chat, toll free phone, instant messengers, email, help desk and knowledgebase.&nbsp; We provide you a free cPanel / WHM newbie guide to help you get started immediately with a fast learning curve. <B>No support in the industry comes close</B>. </FONT></TD></TR>
<TR>
<TD align=middle><IMG height=116 src="http://virtuosonetsolutions.com/images/ecommerce_im.gif" width=100 border=0></TD>
<TD><FONT style="FONT-SIZE: 8pt" face=Arial color=#404264><B>True Knowledgebase:<BR></B>An incredibly helpful tool for instant answers to common questions. Our knowledgebase is constantly growing with many new inputs each month. Our rich knowledgebase includes How To tutorials, newbie guides, FAQ's and even a free Internet glossary. Precise and valuable.&nbsp; </FONT></TD></TR>
<TR>
<TD align=middle><IMG height=117 src="http://virtuosonetsolutions.com/images/shared.gif" width=100 border=0></TD>
<TD><FONT style="FONT-SIZE: 8pt" face=Arial color=#404264><B>Time:<BR></B>Technology changes and your site starts growing over a period of time. You feel the need to upgrade your server for more power, space and bandwidth. We will help you move your data from your current server to your newly purchased server. We grow together and your satisfaction will remain satisfied. </FONT></TD></TR>
<TR>
<TD align=middle><IMG height=117 src="http://virtuosonetsolutions.com/images/management.gif" width=100 border=0></TD>
<TD><FONT style="FONT-SIZE: 8pt" face=Arial color=#404264><FONT size=2><STRONG>Managed Services Included:<BR>&nbsp;</STRONG></FONT><SPAN style="FONT-SIZE: 8pt"><FONT color=#3b3d61><STRONG><FONT face=Wingdings>ü</FONT><FONT face=Arial> </FONT></STRONG>Remote Reboot<FONT face=Arial><BR>&nbsp;</FONT><STRONG><FONT face=Wingdings>ü</FONT><FONT face=Arial> </FONT></STRONG></FONT><FONT face=Arial color=#3b3d61>Server monitoring<BR>&nbsp;</FONT><FONT color=#3b3d61><STRONG><FONT face=Wingdings>ü</FONT><FONT face=Arial> </FONT></STRONG></FONT><FONT face=Arial color=#3b3d61>Server upgrades<BR>&nbsp;</FONT><FONT color=#3b3d61><STRONG><FONT face=Wingdings>ü</FONT><FONT face=Arial> </FONT></STRONG></FONT><FONT face=Arial color=#3b3d61>Primary and Secondary DNS <BR>&nbsp;</FONT><FONT color=#3b3d61><STRONG><FONT face=Wingdings>ü</FONT><FONT face=Arial> </FONT></STRONG></FONT><FONT face=Arial color=#3b3d61>Server &amp; Software Diagnosis<BR>&nbsp;</FONT><FONT color=#3b3d61><STRONG><FONT face=Wingdings>ü</FONT><FONT face=Arial> </FONT></STRONG></FONT></SPAN><FONT face=Arial color=#3b3d61><SPAN style="FONT-SIZE: 8pt">Ping monitoring<BR>&nbsp;</SPAN></FONT><SPAN style="FONT-SIZE: 8pt"><FONT color=#3b3d61><STRONG><FONT face=Wingdings>ü</FONT><FONT face=Arial> </FONT></STRONG></FONT></SPAN><FONT face=Arial color=#3b3d61><SPAN style="FONT-SIZE: 8pt">Backups (second drive required)<BR></SPAN></FONT></FONT><SPAN style="FONT-SIZE: 8pt"><FONT color=#3b3d61><STRONG><FONT face=Wingdings>ü</FONT><FONT face=Arial> Free Server Hardening ($200 Value)</FONT></STRONG></FONT></SPAN></TD></TR>
<TR>
<TD colSpan=2 height=270><FONT face=Arial color=#404264><STRONG><SPAN style="FONT-SIZE: 8pt"><IMG height=14 src="http://virtuosonetsolutions.com/images/leftquote.gif" width=19 border=0></SPAN></STRONG><SPAN style="FONT-SIZE: 8pt"> I cant remember how I found you, but you guys are awesome. I love the tech support. You are always there when I need you, and are more than willing to help out even with the smallest of questions and problems. Would highly recommend you.<BR><STRONG>Mark</STRONG></SPAN><STRONG><SPAN style="FONT-SIZE: 8pt"> - serverbasket.com <IMG height=14 src="http://virtuosonetsolutions.com/images/rightquote.gif" width=19 border=0></SPAN></STRONG></FONT> 
<P><FONT face=Arial color=#404264><SPAN style="FONT-SIZE: 8pt"><IMG height=14 src="http://virtuosonetsolutions.com/images/leftquote.gif" width=19 border=0>&nbsp;I first came to Virtuoso Net Solutions wanting to rent a server for the first time. I had primitive knowledge on how to run and maintain a server. They have helped me all the way so far. When ever I need help I have always been able to get it straight away<BR></SPAN><STRONG><SPAN style="FONT-SIZE: 8pt">Frazer - nu-host.co.uk <IMG height=14 src="http://virtuosonetsolutions.com/images/rightquote.gif" width=19 border=0></SPAN></STRONG></FONT></P>
<P align=left><FONT style="FONT-SIZE: 8pt" face=Arial color=#3b3d61><A href="http://www.virtuosonetsolutions.com/shop.php?cat=186&amp;">Click here</A> to read about our complete managed services and free server security hardening.</FONT></P>
<P align=left><FONT style="FONT-SIZE: 8pt" face=Arial color=#404264><STRONG>* </STRONG>Server / OS updates do not include kernel upgrades.</FONT></P></TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; PADDING-BOTTOM: 1px; PADDING-TOP: 1px" align=right width=100 bgColor=#ffffff colSpan=3 height=25>
<P align=left><SPAN style="FONT-WEIGHT: 700"><FONT style="FONT-SIZE: 8pt" face=Arial color=#404264>Software:</FONT></SPAN></P></TD></TR>
<TR>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " align=right width=100 bgColor=#3b3d61><FONT style="FONT-SIZE: 8pt" face=Arial color=#ffffff>Control Panel:</FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=20 bgColor=#e2e2e2>
<DIV id=Tip2 style="BORDER-RIGHT: #3b3d61 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #3b3d61 1px solid; PADDING-LEFT: 2px; Z-INDEX: 1; LEFT: 385px; VISIBILITY: hidden; PADDING-BOTTOM: 2px; BORDER-LEFT: #3b3d61 1px solid; WIDTH: 200px; PADDING-TOP: 2px; BORDER-BOTTOM: #3b3d61 1px solid; POSITION: absolute; TOP: 188px; BACKGROUND-COLOR: #ffffff"><FONT face=Arial color=#3b3d61><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none">cPanel is the #1 control panel that features a user-friendly interface and full functionality for your server</DIV></SPAN></FONT><FONT face=Arial><A onmousemove="floatLayer('Tip2')" onmouseover="getLayer('Tip2')" onmouseout="hideLayer('Tip2')" href="javascript:void(0)"><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none"><FONT color=#3b3d61>?</FONT></SPAN></A></FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=40 bgColor=#ff8a15><FONT color=#3b3d61><IMG height=12 src="http://virtuosonetsolutions.com/images/checked.gif" width=12 border=0></FONT></TD></TR>
<TR>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " align=right width=100 bgColor=#3b3d61><FONT style="FONT-SIZE: 8pt" face=Arial color=#ffffff>Fantastico:</FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=20 bgColor=#e2e2e2>
<DIV id=Tip1 style="BORDER-RIGHT: #3b3d61 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #3b3d61 1px solid; PADDING-LEFT: 2px; Z-INDEX: 1; LEFT: 385px; VISIBILITY: hidden; PADDING-BOTTOM: 2px; BORDER-LEFT: #3b3d61 1px solid; WIDTH: 200px; PADDING-TOP: 2px; BORDER-BOTTOM: #3b3d61 1px solid; POSITION: absolute; TOP: 188px; BACKGROUND-COLOR: #ffffff"><FONT face=Arial color=#3b3d61><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none">Fantastico De Luxe is the leading autoinstaller for cPanel servers. It provides end users the ability to quickly install dozens of the leading open source content management systems into their web space</DIV></SPAN></FONT><FONT face=Arial><A onmousemove="floatLayer('Tip1')" onmouseover="getLayer('Tip1')" onmouseout="hideLayer('Tip1')" href="javascript:void(0)"><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none"><FONT color=#3b3d61>?</FONT></SPAN></A></FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=40 bgColor=#ff8a15><FONT color=#3b3d61><IMG height=12 src="http://virtuosonetsolutions.com/images/checked.gif" width=12 border=0></FONT></TD></TR>
<TR>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " align=right width=100 bgColor=#3b3d61><FONT style="FONT-SIZE: 8pt" face=Arial color=#ffffff>Modules:</FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=20 bgColor=#e2e2e2>
<DIV id=Tip3 style="BORDER-RIGHT: #3b3d61 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #3b3d61 1px solid; PADDING-LEFT: 2px; Z-INDEX: 1; LEFT: 385px; VISIBILITY: hidden; PADDING-BOTTOM: 2px; BORDER-LEFT: #3b3d61 1px solid; WIDTH: 200px; PADDING-TOP: 2px; BORDER-BOTTOM: #3b3d61 1px solid; POSITION: absolute; TOP: 188px; BACKGROUND-COLOR: #ffffff"><FONT face=Arial color=#3b3d61><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none">Most common modules installed including MySQL, PHP, Perl, CGI and many others. You may install any modules at your wish anytime</DIV></SPAN></FONT><FONT face=Arial><A onmousemove="floatLayer('Tip3')" onmouseover="getLayer('Tip3')" onmouseout="hideLayer('Tip3')" href="javascript:void(0)"><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none"><FONT color=#3b3d61>?</FONT></SPAN></A></FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=40 bgColor=#ff8a15><FONT color=#3b3d61><IMG height=12 src="http://virtuosonetsolutions.com/images/checked.gif" width=12 border=0></FONT></TD></TR>
<TR>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " align=right width=100 bgColor=#3b3d61><FONT face=Arial color=#ffffff><SPAN style="FONT-SIZE: 8pt">Web Analytics:</SPAN></FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=20 bgColor=#e2e2e2>
<DIV id=Tip4 style="BORDER-RIGHT: #3b3d61 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #3b3d61 1px solid; PADDING-LEFT: 2px; Z-INDEX: 1; LEFT: 385px; VISIBILITY: hidden; PADDING-BOTTOM: 2px; BORDER-LEFT: #3b3d61 1px solid; WIDTH: 200px; PADDING-TOP: 2px; BORDER-BOTTOM: #3b3d61 1px solid; POSITION: absolute; TOP: 188px; BACKGROUND-COLOR: #ffffff"><FONT face=Arial color=#3b3d61><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none">Colorful and detailed stats program including Awstats, Analog and Webalyzer. Updated automatically each day to reflect in depth information about your visitors</DIV></SPAN></FONT><FONT face=Arial><A onmousemove="floatLayer('Tip4')" onmouseover="getLayer('Tip4')" onmouseout="hideLayer('Tip4')" href="javascript:void(0)"><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none"><FONT color=#3b3d61>?</FONT></SPAN></A></FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=40 bgColor=#ff8a15><FONT color=#3b3d61><IMG height=12 src="http://virtuosonetsolutions.com/images/checked.gif" width=12 border=0></FONT></TD></TR>
<TR>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; PADDING-BOTTOM: 1px; PADDING-TOP: 1px" align=right width=100 bgColor=#ffffff colSpan=3 height=25>
<P align=left><SPAN style="FONT-WEIGHT: 700"><FONT style="FONT-SIZE: 8pt" face=Arial color=#404264>Security Features:</FONT></SPAN></P></TD></TR>
<TR>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " align=right width=100 bgColor=#3b3d61><FONT style="FONT-SIZE: 8pt" face=Arial color=#ffffff>Anti-Virus:</FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=20 bgColor=#e2e2e2>
<DIV id=Tip5 style="BORDER-RIGHT: #3b3d61 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #3b3d61 1px solid; PADDING-LEFT: 2px; Z-INDEX: 1; LEFT: 385px; VISIBILITY: hidden; PADDING-BOTTOM: 2px; BORDER-LEFT: #3b3d61 1px solid; WIDTH: 200px; PADDING-TOP: 2px; BORDER-BOTTOM: #3b3d61 1px solid; POSITION: absolute; TOP: 188px; BACKGROUND-COLOR: #ffffff"><FONT face=Arial color=#3b3d61><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none">ClamAV anti-virus protection instantly detects 99% of virus infected emails and deletes them before they reach your inbox</DIV></SPAN></FONT><FONT face=Arial><A onmousemove="floatLayer('Tip5')" onmouseover="getLayer('Tip5')" onmouseout="hideLayer('Tip5')" href="javascript:void(0)"><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none"><FONT color=#3b3d61>?</FONT></SPAN></A></FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=40 bgColor=#ff8a15><FONT color=#3b3d61><IMG height=12 src="http://virtuosonetsolutions.com/images/checked.gif" width=12 border=0></FONT></TD></TR>
<TR>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " align=right width=100 bgColor=#3b3d61><FONT face=Arial color=#ffffff><SPAN style="FONT-SIZE: 8pt">Backups:</SPAN></FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=20 bgColor=#e2e2e2>
<DIV id=Tip6 style="BORDER-RIGHT: #3b3d61 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #3b3d61 1px solid; PADDING-LEFT: 2px; Z-INDEX: 1; LEFT: 385px; VISIBILITY: hidden; PADDING-BOTTOM: 2px; BORDER-LEFT: #3b3d61 1px solid; WIDTH: 200px; PADDING-TOP: 2px; BORDER-BOTTOM: #3b3d61 1px solid; POSITION: absolute; TOP: 188px; BACKGROUND-COLOR: #ffffff"><FONT face=Arial color=#3b3d61><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none">Automatic daily backups of your entire account copied to your secondary drive. Secondary drive mandatory for backups</DIV></SPAN></FONT><FONT face=Arial><A onmousemove="floatLayer('Tip6')" onmouseover="getLayer('Tip6')" onmouseout="hideLayer('Tip6')" href="javascript:void(0)"><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none"><FONT color=#3b3d61>?</FONT></SPAN></A></FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=40 bgColor=#ff8a15><FONT color=#3b3d61><IMG height=12 src="http://virtuosonetsolutions.com/images/checked.gif" width=12 border=0></FONT></TD></TR>
<TR>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " align=right width=100 bgColor=#3b3d61><FONT style="FONT-SIZE: 8pt" face=Arial color=#ffffff>Firewall:</FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=20 bgColor=#e2e2e2>
<DIV id=Tip7 style="BORDER-RIGHT: #3b3d61 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #3b3d61 1px solid; PADDING-LEFT: 2px; Z-INDEX: 1; LEFT: 385px; VISIBILITY: hidden; PADDING-BOTTOM: 2px; BORDER-LEFT: #3b3d61 1px solid; WIDTH: 200px; PADDING-TOP: 2px; BORDER-BOTTOM: #3b3d61 1px solid; POSITION: absolute; TOP: 188px; BACKGROUND-COLOR: #ffffff"><FONT face=Arial color=#3b3d61><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none">Policy based iptables firewall system designed for ease of use and configuration. </DIV></SPAN></FONT><FONT face=Arial><A onmousemove="floatLayer('Tip7')" onmouseover="getLayer('Tip7')" onmouseout="hideLayer('Tip7')" href="javascript:void(0)"><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none"><FONT color=#3b3d61>?</FONT></SPAN></A></FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=40 bgColor=#ff8a15><FONT color=#3b3d61><IMG height=12 src="http://virtuosonetsolutions.com/images/checked.gif" width=12 border=0></FONT></TD></TR>
<TR>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " align=right width=100 bgColor=#3b3d61><FONT style="FONT-SIZE: 8pt" face=Arial color=#ffffff>Root / SSH:</FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=20 bgColor=#e2e2e2>
<DIV id=Tip8 style="BORDER-RIGHT: #3b3d61 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #3b3d61 1px solid; PADDING-LEFT: 2px; Z-INDEX: 1; LEFT: 385px; VISIBILITY: hidden; PADDING-BOTTOM: 2px; BORDER-LEFT: #3b3d61 1px solid; WIDTH: 200px; PADDING-TOP: 2px; BORDER-BOTTOM: #3b3d61 1px solid; POSITION: absolute; TOP: 188px; BACKGROUND-COLOR: #ffffff"><FONT face=Arial color=#3b3d61><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none">You get full control of your server, 100%</DIV></SPAN></FONT><FONT face=Arial><A onmousemove="floatLayer('Tip8')" onmouseover="getLayer('Tip8')" onmouseout="hideLayer('Tip8')" href="javascript:void(0)"><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none"><FONT color=#3b3d61>?</FONT></SPAN></A></FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=40 bgColor=#ff8a15><FONT color=#3b3d61><IMG height=12 src="http://virtuosonetsolutions.com/images/checked.gif" width=12 border=0></FONT></TD></TR>
<TR>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " align=right width=100 bgColor=#3b3d61><FONT face=Arial color=#ffffff><SPAN style="FONT-SIZE: 8pt">Spam Assassin:</SPAN></FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=20 bgColor=#e2e2e2>
<DIV id=Tip9 style="BORDER-RIGHT: #3b3d61 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #3b3d61 1px solid; PADDING-LEFT: 2px; Z-INDEX: 1; LEFT: 385px; VISIBILITY: hidden; PADDING-BOTTOM: 2px; BORDER-LEFT: #3b3d61 1px solid; WIDTH: 200px; PADDING-TOP: 2px; BORDER-BOTTOM: #3b3d61 1px solid; POSITION: absolute; TOP: 188px; BACKGROUND-COLOR: #ffffff"><FONT face=Arial color=#3b3d61><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none">SpamAssassin is a mature, widely-deployed open source project that serves as a mail filter to identify spam, also known as unsolicited commercial email (UCE). SpamAssassin uses a variety of mechanisms including header and text analysis, Bayesian filtering, DNS blocklists, and collaborative filtering databases. SpamAssassin runs on a server, and filters spam before it reaches your mailbox.</DIV></SPAN></FONT><FONT face=Arial><A onmousemove="floatLayer('Tip9')" onmouseover="getLayer('Tip9')" onmouseout="hideLayer('Tip9')" href="javascript:void(0)"><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none"><FONT color=#3b3d61>?</FONT></SPAN></A></FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=40 bgColor=#ff8a15><FONT color=#3b3d61><IMG height=12 src="http://virtuosonetsolutions.com/images/checked.gif" width=12 border=0></FONT></TD></TR>
<TR>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " align=right width=100 bgColor=#3b3d61><FONT face=Arial color=#ffffff><SPAN style="FONT-SIZE: 8pt">Web Mail:</SPAN></FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=20 bgColor=#e2e2e2>
<DIV id=Tip10 style="BORDER-RIGHT: #3b3d61 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #3b3d61 1px solid; PADDING-LEFT: 2px; Z-INDEX: 1; LEFT: 385px; VISIBILITY: hidden; PADDING-BOTTOM: 2px; BORDER-LEFT: #3b3d61 1px solid; WIDTH: 200px; PADDING-TOP: 2px; BORDER-BOTTOM: #3b3d61 1px solid; POSITION: absolute; TOP: 188px; BACKGROUND-COLOR: #ffffff"><FONT face=Arial color=#3b3d61><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none">Three webmail programs to choose from: Horde, Neomail and Squirrelmail. Simple user-interfaces, full functionality. Secure access.</DIV></SPAN></FONT><FONT face=Arial><A onmousemove="floatLayer('Tip10')" onmouseover="getLayer('Tip10')" onmouseout="hideLayer('Tip10')" href="javascript:void(0)"><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none"><FONT color=#3b3d61>?</FONT></SPAN></A></FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=40 bgColor=#ff8a15><FONT color=#3b3d61><IMG height=12 src="http://virtuosonetsolutions.com/images/checked.gif" width=12 border=0></FONT></TD></TR>
<TR>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; PADDING-BOTTOM: 1px; PADDING-TOP: 1px" align=right width=100 bgColor=#ffffff colSpan=3 height=25>
<P align=left><SPAN style="FONT-WEIGHT: 700"><FONT style="FONT-SIZE: 8pt" face=Arial color=#404264>Network:</FONT></SPAN></P></TD></TR>
<TR>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; BORDER-RIGHT-COLOR: #6a6e96; 9394BF: " align=right width=100 bgColor=#3b3d61><FONT style="FONT-SIZE: 8pt" face=Arial color=#ffffff>Backbone Carriers:</FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=20 bgColor=#e2e2e2>
<DIV id=Tip11 style="BORDER-RIGHT: #3b3d61 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #3b3d61 1px solid; PADDING-LEFT: 2px; Z-INDEX: 1; LEFT: 385px; VISIBILITY: hidden; PADDING-BOTTOM: 2px; BORDER-LEFT: #3b3d61 1px solid; WIDTH: 200px; PADDING-TOP: 2px; BORDER-BOTTOM: #3b3d61 1px solid; POSITION: absolute; TOP: 188px; BACKGROUND-COLOR: #ffffff"><FONT face=Arial color=#3b3d61><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none">Internap connected to: ATT, Sprint, MCI, Level3, Savvis, Verio, Global Crossing</DIV></SPAN></FONT><FONT face=Arial><A onmousemove="floatLayer('Tip11')" onmouseover="getLayer('Tip11')" onmouseout="hideLayer('Tip11')" href="javascript:void(0)"><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none"><FONT color=#3b3d61>?</FONT></SPAN></A></FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=40 bgColor=#ff8a15><FONT style="FONT-SIZE: 8pt" face=Arial color=#3b3d61>7 Tier 1</FONT></TD></TR>
<TR>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; BORDER-RIGHT-COLOR: #6a6e96; 9394BF: " align=right width=100 bgColor=#3b3d61><FONT style="FONT-SIZE: 8pt" face=Arial color=#ffffff>Backup Power:</FONT><FONT face=Arial color=#ffffff><SPAN style="FONT-SIZE: 8pt">:</SPAN></FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=20 bgColor=#e2e2e2>
<DIV id=Tip12 style="BORDER-RIGHT: #3b3d61 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #3b3d61 1px solid; PADDING-LEFT: 2px; Z-INDEX: 1; LEFT: 385px; VISIBILITY: hidden; PADDING-BOTTOM: 2px; BORDER-LEFT: #3b3d61 1px solid; WIDTH: 200px; PADDING-TOP: 2px; BORDER-BOTTOM: #3b3d61 1px solid; POSITION: absolute; TOP: 188px; BACKGROUND-COLOR: #ffffff"><FONT face=Arial color=#3b3d61><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none">2 Kohler 750KW Diesel Generators, 2 dedicated power systems, 2 Mitsubishi 9800A un-interruptable power supplies, Fire Surpression Gas, 390 Tons of cooling</DIV></SPAN></FONT><FONT face=Arial><A onmousemove="floatLayer('Tip12')" onmouseover="getLayer('Tip12')" onmouseout="hideLayer('Tip12')" href="javascript:void(0)"><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none"><FONT color=#3b3d61>?</FONT></SPAN></A></FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=40 bgColor=#ff8a15><FONT style="FONT-SIZE: 8pt" face=Arial color=#3b3d61>48hrs</FONT></TD></TR>
<TR>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; BORDER-RIGHT-COLOR: #6a6e96; 9394BF: " align=right width=100 bgColor=#3b3d61><FONT face=Arial color=#ffffff><SPAN style="FONT-SIZE: 8pt">Server Connectivity:</SPAN></FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=20 bgColor=#e2e2e2>
<DIV id=Tip13 style="BORDER-RIGHT: #3b3d61 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #3b3d61 1px solid; PADDING-LEFT: 2px; Z-INDEX: 1; LEFT: 385px; VISIBILITY: hidden; PADDING-BOTTOM: 2px; BORDER-LEFT: #3b3d61 1px solid; WIDTH: 200px; PADDING-TOP: 2px; BORDER-BOTTOM: #3b3d61 1px solid; POSITION: absolute; TOP: 188px; BACKGROUND-COLOR: #ffffff"><FONT face=Arial color=#3b3d61><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none">10Mbit uplink default, upgradeable to 100Mbit</DIV></SPAN></FONT><FONT face=Arial><A onmousemove="floatLayer('Tip13')" onmouseover="getLayer('Tip13')" onmouseout="hideLayer('Tip13')" href="javascript:void(0)"><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none"><FONT color=#3b3d61>?</FONT></SPAN></A></FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=40 bgColor=#ff8a15><FONT face=Arial color=#3b3d61><SPAN style="FONT-SIZE: 8pt">10 Mbit</SPAN></FONT></TD></TR>
<TR>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; BORDER-RIGHT-COLOR: #6a6e96; 9394BF: " align=right width=100 bgColor=#3b3d61><FONT style="FONT-SIZE: 8pt" face=Arial color=#ffffff>Security:</FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=20 bgColor=#e2e2e2>
<DIV id=Tip15 style="BORDER-RIGHT: #3b3d61 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #3b3d61 1px solid; PADDING-LEFT: 2px; Z-INDEX: 1; LEFT: 385px; VISIBILITY: hidden; PADDING-BOTTOM: 2px; BORDER-LEFT: #3b3d61 1px solid; WIDTH: 200px; PADDING-TOP: 2px; BORDER-BOTTOM: #3b3d61 1px solid; POSITION: absolute; TOP: 188px; BACKGROUND-COLOR: #ffffff"><FONT face=Arial color=#3b3d61><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none">15 security cameras indoor/outdoor, 45 days of archive, silent knight laser smoke detectors, fire surpression gas</DIV></SPAN></FONT><FONT face=Arial><A onmousemove="floatLayer('Tip15')" onmouseover="getLayer('Tip15')" onmouseout="hideLayer('Tip15')" href="javascript:void(0)"><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none"><FONT color=#3b3d61>?</FONT></SPAN></A></FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=40 bgColor=#ff8a15><FONT style="FONT-SIZE: 8pt" face=Arial color=#3b3d61>24/7</FONT></TD></TR>
<TR>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; BORDER-RIGHT-COLOR: #6a6e96; 9394BF: " align=right width=100 bgColor=#3b3d61><FONT face=Arial color=#ffffff><SPAN style="FONT-SIZE: 8pt">Uptime Guarantee:</SPAN></FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=20 bgColor=#e2e2e2>
<DIV id=Tip16 style="BORDER-RIGHT: #3b3d61 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #3b3d61 1px solid; PADDING-LEFT: 2px; Z-INDEX: 1; LEFT: 385px; VISIBILITY: hidden; PADDING-BOTTOM: 2px; BORDER-LEFT: #3b3d61 1px solid; WIDTH: 200px; PADDING-TOP: 2px; BORDER-BOTTOM: #3b3d61 1px solid; POSITION: absolute; TOP: 188px; BACKGROUND-COLOR: #ffffff"><FONT face=Arial color=#3b3d61><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none">Ture 99.99% Network SLA backed by Internap | 7 Tier-1 backbone providers</DIV></SPAN></FONT><FONT face=Arial><A onmousemove="floatLayer('Tip16')" onmouseover="getLayer('Tip16')" onmouseout="hideLayer('Tip16')" href="javascript:void(0)"><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none"><FONT color=#3b3d61>?</FONT></SPAN></A></FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=40 bgColor=#ff8a15><FONT style="FONT-SIZE: 8pt" face=Arial color=#3b3d61>99.99%</FONT></TD></TR>
<TR>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; BORDER-RIGHT-COLOR: #6a6e96; 9394BF: " align=right width=100 bgColor=#3b3d61><FONT style="FONT-SIZE: 8pt" face=Arial color=#ffffff>Private VLAN:</FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=20 bgColor=#e2e2e2>
<DIV id=Tip19 style="BORDER-RIGHT: #3b3d61 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #3b3d61 1px solid; PADDING-LEFT: 2px; Z-INDEX: 1; LEFT: 385px; VISIBILITY: hidden; PADDING-BOTTOM: 2px; BORDER-LEFT: #3b3d61 1px solid; WIDTH: 200px; PADDING-TOP: 2px; BORDER-BOTTOM: #3b3d61 1px solid; POSITION: absolute; TOP: 188px; BACKGROUND-COLOR: #ffffff"><FONT face=Arial color=#3b3d61><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none">(Virtual LAN) A VLAN is created when a bunch of physically connected ports are grouped together by network hardware and software that supports VLANs. These VLANs are each treated as completely separate entities and can only be joined together by a router. This scheme is useful for grouping departments together for security and minimizing network traffic.</DIV></SPAN></FONT><FONT face=Arial><A onmousemove="floatLayer('Tip19')" onmouseover="getLayer('Tip19')" onmouseout="hideLayer('Tip19')" href="javascript:void(0)"><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none"><FONT color=#3b3d61>?</FONT></SPAN></A></FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=40 bgColor=#ff8a15><FONT color=#3b3d61><IMG height=12 src="http://virtuosonetsolutions.com/images/checked.gif" width=12 border=0></FONT></TD></TR>
<TR>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; BORDER-RIGHT-COLOR: #6a6e96; 9394BF: " align=right width=100 bgColor=#3b3d61><FONT style="FONT-SIZE: 8pt" face=Arial color=#ffffff>Remote Reboot:</FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=20 bgColor=#e2e2e2>
<DIV id=Tip17 style="BORDER-RIGHT: #3b3d61 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #3b3d61 1px solid; PADDING-LEFT: 2px; Z-INDEX: 1; LEFT: 385px; VISIBILITY: hidden; PADDING-BOTTOM: 2px; BORDER-LEFT: #3b3d61 1px solid; WIDTH: 200px; PADDING-TOP: 2px; BORDER-BOTTOM: #3b3d61 1px solid; POSITION: absolute; TOP: 188px; BACKGROUND-COLOR: #ffffff"><FONT face=Arial color=#3b3d61><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none">Instant remote reboots via web interface 24/7</DIV></SPAN></FONT><FONT face=Arial><A onmousemove="floatLayer('Tip17')" onmouseover="getLayer('Tip17')" onmouseout="hideLayer('Tip17')" href="javascript:void(0)"><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none"><FONT color=#3b3d61>?</FONT></SPAN></A></FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=40 bgColor=#ff8a15><FONT color=#3b3d61><IMG height=12 src="http://virtuosonetsolutions.com/images/checked.gif" width=12 border=0></FONT></TD></TR>
<TR>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; PADDING-BOTTOM: 1px; PADDING-TOP: 1px" align=right bgColor=#ffffff colSpan=3 height=25>
<P align=left><FONT style="FONT-SIZE: 8pt" face=Arial color=#404264><SPAN style="FONT-WEIGHT: 700">Modules:</SPAN></FONT><FONT face=Arial><FONT color=#404264><SPAN style="FONT-SIZE: 8pt"> Full list: </SPAN></FONT><A href="http://www.virtuosonetsolutions.com/phpinfo.php"><SPAN style="FONT-SIZE: 8pt"><FONT color=#404264>PHP Info</FONT></SPAN></A></FONT></P></TD></TR>
<TR>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " align=right width=100 bgColor=#3b3d61><FONT style="FONT-SIZE: 8pt" face=Arial color=#ffffff>Free Module Install:</FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=20 bgColor=#e2e2e2>
<DIV id=Tip18 style="BORDER-RIGHT: #3b3d61 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #3b3d61 1px solid; PADDING-LEFT: 2px; Z-INDEX: 1; LEFT: 385px; VISIBILITY: hidden; PADDING-BOTTOM: 2px; BORDER-LEFT: #3b3d61 1px solid; WIDTH: 200px; PADDING-TOP: 2px; BORDER-BOTTOM: #3b3d61 1px solid; POSITION: absolute; TOP: 188px; BACKGROUND-COLOR: #ffffff"><FONT face=Arial color=#3b3d61><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none">If a module is included in the original operating system, we will intall it for you, free!</DIV></SPAN></FONT><FONT face=Arial><A onmousemove="floatLayer('Tip18')" onmouseover="getLayer('Tip18')" onmouseout="hideLayer('Tip18')" href="javascript:void(0)"><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none"><FONT color=#3b3d61>?</FONT></SPAN></A></FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=40 bgColor=#ff8a15><FONT color=#3b3d61><IMG height=12 src="http://virtuosonetsolutions.com/images/checked.gif" width=12 border=0></FONT></TD></TR>
<TR>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " align=right width=100 bgColor=#3b3d61><FONT style="FONT-SIZE: 8pt" face=Arial color=#ffffff>CGI:</FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=20 bgColor=#e2e2e2>
<DIV id=Tip20 style="BORDER-RIGHT: #3b3d61 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #3b3d61 1px solid; PADDING-LEFT: 2px; Z-INDEX: 1; LEFT: 385px; VISIBILITY: hidden; PADDING-BOTTOM: 2px; BORDER-LEFT: #3b3d61 1px solid; WIDTH: 200px; PADDING-TOP: 2px; BORDER-BOTTOM: #3b3d61 1px solid; POSITION: absolute; TOP: 188px; BACKGROUND-COLOR: #ffffff"><FONT face=Arial color=#3b3d61><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none">The common gateway interface (CGI) is a standard way for a Web server to pass a Web user's request to an application program and to receive data back to forward to the user.</DIV></SPAN></FONT><FONT face=Arial><A onmousemove="floatLayer('Tip20')" onmouseover="getLayer('Tip20')" onmouseout="hideLayer('Tip20')" href="javascript:void(0)"><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none"><FONT color=#3b3d61>?</FONT></SPAN></A></FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=40 bgColor=#ff8a15><FONT color=#3b3d61><IMG height=12 src="http://virtuosonetsolutions.com/images/checked.gif" width=12 border=0></FONT></TD></TR>
<TR>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " align=right width=100 bgColor=#3b3d61><FONT style="FONT-SIZE: 8pt" face=Arial color=#ffffff>Flash:</FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=20 bgColor=#e2e2e2>
<DIV id=Tip21 style="BORDER-RIGHT: #3b3d61 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #3b3d61 1px solid; PADDING-LEFT: 2px; Z-INDEX: 1; LEFT: 385px; VISIBILITY: hidden; PADDING-BOTTOM: 2px; BORDER-LEFT: #3b3d61 1px solid; WIDTH: 200px; PADDING-TOP: 2px; BORDER-BOTTOM: #3b3d61 1px solid; POSITION: absolute; TOP: 188px; BACKGROUND-COLOR: #ffffff"><FONT face=Arial color=#3b3d61><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none">Macromedia's Flash techonology module installed and ready for flash server usage</DIV></SPAN></FONT><FONT face=Arial><A onmousemove="floatLayer('Tip21')" onmouseover="getLayer('Tip21')" onmouseout="hideLayer('Tip21')" href="javascript:void(0)"><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none"><FONT color=#3b3d61>?</FONT></SPAN></A></FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=40 bgColor=#ff8a15><FONT color=#3b3d61><IMG height=12 src="http://virtuosonetsolutions.com/images/checked.gif" width=12 border=0></FONT></TD></TR>
<TR>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " align=right width=100 bgColor=#3b3d61><FONT face=Arial color=#ffffff><SPAN style="FONT-SIZE: 8pt">FrontPage:</SPAN></FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=20 bgColor=#e2e2e2>
<DIV id=Tip22 style="BORDER-RIGHT: #3b3d61 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #3b3d61 1px solid; PADDING-LEFT: 2px; Z-INDEX: 1; LEFT: 385px; VISIBILITY: hidden; PADDING-BOTTOM: 2px; BORDER-LEFT: #3b3d61 1px solid; WIDTH: 200px; PADDING-TOP: 2px; BORDER-BOTTOM: #3b3d61 1px solid; POSITION: absolute; TOP: 188px; BACKGROUND-COLOR: #ffffff"><FONT face=Arial color=#3b3d61><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none">Microsoft FrontPage extension available immediately</DIV></SPAN></FONT><FONT face=Arial><A onmousemove="floatLayer('Tip22')" onmouseover="getLayer('Tip22')" onmouseout="hideLayer('Tip22')" href="javascript:void(0)"><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none"><FONT color=#3b3d61>?</FONT></SPAN></A></FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=40 bgColor=#ff8a15><FONT color=#3b3d61><IMG height=12 src="http://virtuosonetsolutions.com/images/checked.gif" width=12 border=0></FONT></TD></TR>
<TR>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " align=right width=100 bgColor=#3b3d61><FONT style="FONT-SIZE: 8pt" face=Arial color=#ffffff>GD2:</FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=20 bgColor=#e2e2e2>
<DIV id=Tip23 style="BORDER-RIGHT: #3b3d61 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #3b3d61 1px solid; PADDING-LEFT: 2px; Z-INDEX: 1; LEFT: 385px; VISIBILITY: hidden; PADDING-BOTTOM: 2px; BORDER-LEFT: #3b3d61 1px solid; WIDTH: 200px; PADDING-TOP: 2px; BORDER-BOTTOM: #3b3d61 1px solid; POSITION: absolute; TOP: 188px; BACKGROUND-COLOR: #ffffff"><FONT face=Arial color=#3b3d61><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none">GD2 module installed by default</DIV></SPAN></FONT><FONT face=Arial><A onmousemove="floatLayer('Tip23')" onmouseover="getLayer('Tip23')" onmouseout="hideLayer('Tip23')" href="javascript:void(0)"><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none"><FONT color=#3b3d61>?</FONT></SPAN></A></FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=40 bgColor=#ff8a15><FONT color=#3b3d61><IMG height=12 src="http://virtuosonetsolutions.com/images/checked.gif" width=12 border=0></FONT></TD></TR>
<TR>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " align=right width=100 bgColor=#3b3d61><FONT style="FONT-SIZE: 8pt" face=Arial color=#ffffff>ImageMagick:</FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=20 bgColor=#e2e2e2>
<DIV id=Tip24 style="BORDER-RIGHT: #3b3d61 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #3b3d61 1px solid; PADDING-LEFT: 2px; Z-INDEX: 1; LEFT: 385px; VISIBILITY: hidden; PADDING-BOTTOM: 2px; BORDER-LEFT: #3b3d61 1px solid; WIDTH: 200px; PADDING-TOP: 2px; BORDER-BOTTOM: #3b3d61 1px solid; POSITION: absolute; TOP: 188px; BACKGROUND-COLOR: #ffffff"><FONT face=Arial color=#3b3d61><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none">ImageMagick module available for install, free</DIV></SPAN></FONT><FONT face=Arial><A onmousemove="floatLayer('Tip24')" onmouseover="getLayer('Tip24')" onmouseout="hideLayer('Tip24')" href="javascript:void(0)"><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none"><FONT color=#3b3d61>?</FONT></SPAN></A></FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=40 bgColor=#ff8a15><FONT color=#3b3d61><IMG height=12 src="http://virtuosonetsolutions.com/images/checked.gif" width=12 border=0></FONT></TD></TR>
<TR>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " align=right width=100 bgColor=#3b3d61><FONT face=Arial color=#ffffff><SPAN style="FONT-SIZE: 8pt">MySQL:</SPAN></FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=20 bgColor=#e2e2e2>
<DIV id=Tip25 style="BORDER-RIGHT: #3b3d61 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #3b3d61 1px solid; PADDING-LEFT: 2px; Z-INDEX: 1; LEFT: 385px; VISIBILITY: hidden; PADDING-BOTTOM: 2px; BORDER-LEFT: #3b3d61 1px solid; WIDTH: 200px; PADDING-TOP: 2px; BORDER-BOTTOM: #3b3d61 1px solid; POSITION: absolute; TOP: 188px; BACKGROUND-COLOR: #ffffff"><FONT face=Arial color=#3b3d61><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none">Latest stable version of MySQL availble and installed by default, fully customizeable by end user</DIV></SPAN></FONT><FONT face=Arial><A onmousemove="floatLayer('Tip25')" onmouseover="getLayer('Tip25')" onmouseout="hideLayer('Tip25')" href="javascript:void(0)"><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none"><FONT color=#3b3d61>?</FONT></SPAN></A></FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=40 bgColor=#ff8a15><FONT color=#3b3d61><IMG height=12 src="http://virtuosonetsolutions.com/images/checked.gif" width=12 border=0></FONT></TD></TR>
<TR>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " align=right width=100 bgColor=#3b3d61><FONT style="FONT-SIZE: 8pt" face=Arial color=#ffffff>Pear:</FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=20 bgColor=#e2e2e2>
<DIV id=Tip26 style="BORDER-RIGHT: #3b3d61 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #3b3d61 1px solid; PADDING-LEFT: 2px; Z-INDEX: 1; LEFT: 385px; VISIBILITY: hidden; PADDING-BOTTOM: 2px; BORDER-LEFT: #3b3d61 1px solid; WIDTH: 200px; PADDING-TOP: 2px; BORDER-BOTTOM: #3b3d61 1px solid; POSITION: absolute; TOP: 188px; BACKGROUND-COLOR: #ffffff"><FONT face=Arial color=#3b3d61><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none">The PHP Extension and Application Repository, or PEAR, is a framework and distribution system for PHP code components</DIV></SPAN></FONT><FONT face=Arial><A onmousemove="floatLayer('Tip26')" onmouseover="getLayer('Tip26')" onmouseout="hideLayer('Tip26')" href="javascript:void(0)"><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none"><FONT color=#3b3d61>?</FONT></SPAN></A></FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=40 bgColor=#ff8a15><FONT color=#3b3d61><IMG height=12 src="http://virtuosonetsolutions.com/images/checked.gif" width=12 border=0></FONT></TD></TR>
<TR>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " align=right width=100 bgColor=#3b3d61><FONT style="FONT-SIZE: 8pt" face=Arial color=#ffffff>Perl:</FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=20 bgColor=#e2e2e2>
<DIV id=Tip27 style="BORDER-RIGHT: #3b3d61 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #3b3d61 1px solid; PADDING-LEFT: 2px; Z-INDEX: 1; LEFT: 385px; VISIBILITY: hidden; PADDING-BOTTOM: 2px; BORDER-LEFT: #3b3d61 1px solid; WIDTH: 200px; PADDING-TOP: 2px; BORDER-BOTTOM: #3b3d61 1px solid; POSITION: absolute; TOP: 188px; BACKGROUND-COLOR: #ffffff"><FONT face=Arial color=#3b3d61><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none">Practical Extraction and Reporting Language, is a programming language often used for creating CGI programs. Installed by default</DIV></SPAN></FONT><FONT face=Arial><A onmousemove="floatLayer('Tip27')" onmouseover="getLayer('Tip27')" onmouseout="hideLayer('Tip27')" href="javascript:void(0)"><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none"><FONT color=#3b3d61>?</FONT></SPAN></A></FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=40 bgColor=#ff8a15><FONT color=#3b3d61><IMG height=12 src="http://virtuosonetsolutions.com/images/checked.gif" width=12 border=0></FONT></TD></TR>
<TR>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " align=right width=100 bgColor=#3b3d61><FONT style="FONT-SIZE: 8pt" face=Arial color=#ffffff>PHP:</FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=20 bgColor=#e2e2e2>
<DIV id=Tip28 style="BORDER-RIGHT: #3b3d61 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #3b3d61 1px solid; PADDING-LEFT: 2px; Z-INDEX: 1; LEFT: 385px; VISIBILITY: hidden; PADDING-BOTTOM: 2px; BORDER-LEFT: #3b3d61 1px solid; WIDTH: 200px; PADDING-TOP: 2px; BORDER-BOTTOM: #3b3d61 1px solid; POSITION: absolute; TOP: 188px; BACKGROUND-COLOR: #ffffff"><FONT face=Arial color=#3b3d61><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none">PHP is a server-side, cross-platform, HTML embedded scripting language that lets you create dynamic web pages. PHP-enabled web pages are treated just like regular HTML pages and you can create and edit them the same way you normally create regular HTML pages. Always latest, stable version installed</DIV></SPAN></FONT><FONT face=Arial><A onmousemove="floatLayer('Tip28')" onmouseover="getLayer('Tip28')" onmouseout="hideLayer('Tip28')" href="javascript:void(0)"><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none"><FONT color=#3b3d61>?</FONT></SPAN></A></FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=40 bgColor=#ff8a15><FONT color=#3b3d61><IMG height=12 src="http://virtuosonetsolutions.com/images/checked.gif" width=12 border=0></FONT></TD></TR>
<TR>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " align=right width=100 bgColor=#3b3d61><FONT face=Arial color=#ffffff><SPAN style="FONT-SIZE: 8pt">PostgreSQL:</SPAN></FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=20 bgColor=#e2e2e2>
<DIV id=Tip29 style="BORDER-RIGHT: #3b3d61 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #3b3d61 1px solid; PADDING-LEFT: 2px; Z-INDEX: 1; LEFT: 385px; VISIBILITY: hidden; PADDING-BOTTOM: 2px; BORDER-LEFT: #3b3d61 1px solid; WIDTH: 200px; PADDING-TOP: 2px; BORDER-BOTTOM: #3b3d61 1px solid; POSITION: absolute; TOP: 188px; BACKGROUND-COLOR: #ffffff"><FONT face=Arial color=#3b3d61><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none">PostgreSQL is a free software object-relational database server (database management system). It offers an alternative to other open-source database systems (such as MySQL and Firebird), as well as to proprietary systems such as Oracle, Sybase, IBM's DB2 and Microsoft SQL Server.</DIV></SPAN></FONT><FONT face=Arial><A onmousemove="floatLayer('Tip29')" onmouseover="getLayer('Tip29')" onmouseout="hideLayer('Tip29')" href="javascript:void(0)"><SPAN style="FONT-SIZE: 8pt; TEXT-DECORATION: none"><FONT color=#3b3d61>?</FONT></SPAN></A></FONT></TD>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " vAlign=center align=middle width=40 bgColor=#ff8a15><FONT color=#3b3d61><IMG height=12 src="http://virtuosonetsolutions.com/images/checked.gif" width=12 border=0></FONT></TD></TR>
<TR>
<TD style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-COLOR: #6a6e96; BORDER-BOTTOM-COLOR: #6a6e96; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #6a6e96; PADDING-TOP: 1px; 9394BF: " align=right width=100 bgColor=#3b3d61><FONT style="FONT-SIZE: 8pt" face=Arial color=#ffffff>Tomcat</FONT><FONT face=Arial col
Member Avatar for alpha_foobar

Here is some code I developed for mouseover tips... the only reason for doing this is that alt attribute does not work with internet explorer over select boxes.

this code has one major flaw (ignoring the added complexity of having extensive code as a workaround for functionality that is largely provided in the target environment) and that major flaw is that it requires an inline javascript function for every element that requires mouseover tips.

it has several added benefits (of course) in that opening and closing behaviour is completely customisable (i.e. the period of time before it tips appear and the period before they close). And it is also possible to use full HTML in these tips, though it was only designed with text in mind.

<html>
<head>

<style type="text/css">

.help_text_box {
	background-color:white; 
	color:black; 
	font-family:verdana; 
	font-size:8pt; 
	border-style:solid; 
	border-width:1px; 
	border-color:black;
	padding:3px;
	display:none;
	position:absolute;
}

.help_text_DivShim {
	top:0px; 
	left:0px; 
	display:none;
	position:absolute;
}

</style>

<script type="text/javascript">
/**
 * This version has been edited to work in mozilla and IE.
 *
 * Date   02/02/2005
 * 
 * @author James Little
 */
 
/**
 * The Max Width limits the width of the display box.
 *
 */ 
var MAX_WIDTH = 300;

/**
 * This function calculates the width in px that is required
 * to show the given message without wrapping. However
 * it will not return a result greater than the given max,
 * which is probably MAX_WIDTH.
 *
 * @param strMessage The text to be displayed. String text expected.
 * @param max The max size desired. int pixels expected.
 */
function getWidthForString(strMessage, max){
	var result = strMessage.length * 6;
	return (result > max) ? max : result;
}

/**
 * This function returns the mouse coordinates in the form [x, y].
 */
function mouseEvent(e){
	if(!e){
		mozBrowser = false;
		e = window.event;
	}
	
	var xcoord = 0; 
	var ycoord = 0;

	if( ( typeof( e.pageX ) != 'number' && 
      		typeof( e.clientX ) != 'number' ) ) { 
		xcoord = 0; 
		ycoord = 0;
	} else if( typeof( e.pageX ) == 'number' ) { 
		xcoord = e.pageX; 
		ycoord = e.pageY; 
	} else {
		xcoord = e.clientX; 
		ycoord = e.clientY;
		if(!((window.navigator.userAgent.indexOf('Opera') + 1 ) || 
		 	(window.ScriptEngine && 
		 	 ScriptEngine().indexOf('InScript')+1) || 
		 	window.navigator.vendor == 'KDE' ) ) {
			if(document.documentElement && 
			 (document.documentElement.scrollTop || 
			  document.documentElement.scrollLeft)){
				xcoord += document.documentElement.scrollLeft; 
				ycoord += document.documentElement.scrollTop;
			} else if(document.body && 
				(document.body.scrollTop || 
				 document.body.scrollLeft)){
				xcoord += document.body.scrollLeft; 
				ycoord += document.body.scrollTop; 
			} 
		} 
	} 
	return [xcoord,ycoord];
}

/*
 * for debugging events.
 * This truncates the message string such that only 20 lines
 * are ever displayed. 
 */
var msgCount = 0;

/**
 * This function writes a message to a text area on the current
 * webpage. The text area must be called event_register. If 
 * his text area does not exist, then no output will be displayed.
 * 
 * The function uses the objects value member. So the object
 * called event_register must be an object that has a value 
 * member. i.e. textarea or input widgets.
 * 
 */
function writeMessage(msg){
	var i=document.getElementById("event_register");
	if(i){
		if(msgCount > 0 && msgCount < 20){
			i.value = i.value + "\r\n" + msg;
		} else {
			i.value = msg;
			msgCount = 0;
		}
		msgCount++;
	}	
}

/**
 * Close conditionally.
 */
function closeMsgBox(dest){		
	// if the set close time is less than or equal to the current time, 
	// then close the current window.
	if( closeTime <= new Date().getTime() ){
		closeNow(dest);
	}
}

/*
 * Close Now.
 */
function closeNow(dest){
	var i=document.getElementById(dest);
	var ifrRef = document.getElementById('DivShim'); 

	if(i) i.style.display = 'none';	
	if(ifrRef) ifrRef.style.display = 'none'; 
			
	window.storeLayer = null;
	oldObj = null; 
}

// the old object is the last object drawn... we don't need to 
// redraw if this is the current object.
var oldObj = null;

// use timestamp to close windows.
var closeTime = 0;

// use a flag to indicate if we want to draw now
var showBox = false;

// require saving events...
var mouseCoords = null;

// is it a moz browser
var mozBrowser = true;
/**
 * This function handles the mouseover events.
 * We just wait a little before we open...
 * 
 *
 */	
function openMessageBox(obj, message, dest){
	showBox = true;	
	setTimeout(function (){ openMsgBox(obj, message, dest, mozBrowser); }, 
		   600);
}

/**
 * open the box.
 *
 */
function openMsgBox(obj, message, dest, moz){
	if(!showBox) return;
		
	window.storeLayer=document.getElementById(dest);
	
	var ifrRef=null;
	
	// if no mouse event... then prob IE
	if(!moz) ifrRef = document.getElementById('DivShim'); 
	
	if(oldObj != obj && window.storeLayer){
		// save current message state.
		oldObj = obj;

		closeTime = new Date().getTime() + 4997;
		
		setTimeout(function(){ closeMsgBox(dest); }, 5000);
		
		window.storeLayer.innerHTML = message; 
				
		var oPix = document.childNodes ? 'px' : 0;
		
		// we can use the storeLayer to implement 
		// mouse positioning with mozilla gecko browsers.
    		var theLayer = (window.storeLayer.style ? 
    			window.storeLayer.style : 
			window.storeLayer ); 
  		theLayer.left = mouseCoords[0] + oPix; 
  		theLayer.top = mouseCoords[1] + oPix; 
  		theLayer.width 
			= getWidthForString(window.storeLayer.innerHTML, 
				MAX_WIDTH) + oPix;
		
		if(showBox) window.storeLayer.style.display = 'block';

		// this is used to cover the select box... 
		// IE Select boxes cover everything!
		if(ifrRef){			
			ifrRef.style.width = window.storeLayer.offsetWidth;
			ifrRef.style.height = window.storeLayer.offsetHeight;
			// can use style here as I am assuming we are using IE
			ifrRef.style.top = window.storeLayer.style.top;
			ifrRef.style.left = window.storeLayer.style.left;
			ifrRef.style.display = 'block'; 
		}
	} 
}

function closeMessageBox(obj, dest){
	showBox = false;
	if(window.storeLayer && oldObj == obj) {
		closeTime = new Date().getTime() + 497;
		setTimeout(function(){ closeMsgBox(dest); }, 500);
	}
}
</script>

</head>
<body>

<span id="fredId" onmouseout="closeMessageBox(this,'div_help_box')"  onclick="closeNow('div_help_box')">
<select name="fred">
	<option value=""></option>
	<option value="a">Alpha</option>
	<option value="b">Foobar</option>
	<option value="c">Dev</option>
</select>
</span>

<script type="text/javascript">
	document.getElementById("fredId").onmouseover = function(e){
		mouseCoords = mouseEvent(e);
		openMessageBox(this, 'This text is displayed', 'div_help_box');
	}
</script>

<center>
<div id="div_help_box"  
	class="help_text_box" 
	style="z-index:100;">
</div>
</center>

<iframe
	id="DivShim"
	src="javascript:false;"
	scrolling="no"
	frameborder="0"
	class="help_text_DivShim"
	style="z-index:99;">
</iframe> 

</body>
</html>

Also, this code is compatible with internet explorer 6 and mozilla firefox 1.0.3 - currently.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.