onMouseover Tooltips

Technorealm. The UK web site design company

Free javascript

[One of a collection of free javascripts from www.technorealm.co.uk]

Sorry, Internet Explorer only. It doesn't work in Netscape.

This is a useful script if you want to expand an idea, or give a quick explanation of something on your page, without having to make a seperate page for it. All normal style rules can be applied to the text box

Applied to a link.
Applied to highlighted text.

Add the following inside the head tags:

CHANGE THE FOLLOWING STYLES TO SUIT YOUR PAGE

<STYLE>
    .Help {
            position: absolute; posTop: 0; posLeft: 0;
            border-width:1; border-style: solid;
            background-color: yellow; color: #000000;
            width:240; font-size:9pt
          }
</STYLE>
<DIV ID=FOArea CLASS="Help" STYLE="display: none">
 </DIV>
<SCRIPT LANGUAGE="JavaScript">

<!--
    var HelpX, HelpY, HelpText;
    var ToShow, ToClear;
    function DoFlyOver()
    {
      if( ToClear != -1 ) window.clearTimeout( ToClear );
      FOArea.innerText = HelpText;
      FOArea.style.posLeft = HelpX + 20;
      FOArea.style.posTop = HelpY + 20;
      FOArea.style.display = "";
      ToClear = setTimeout( "ClearFlyOver()", 8000, "JAVASCRIPT" );
    }
    function ClearFlyOver()
    {
      FOArea.style.display = "none";
    }
    function FlyOver( Text )
    {
      HelpText = Text;
      HelpX = window.event.clientX;
      HelpY = window.event.clientY;
      ToShow = setTimeout( "DoFlyOver()", 500, "JAVASCRIPT" );
    }
// -->
</SCRIPT>

Now format your link and span tags to suit. The above examples are repeated here, for you to see how it was done.

 Applied to < A  HREF="YOUR LINK GOES IN HERE" onMouseOut="ClearFlyOver();"
     onMouseOver="FlyOver( 'YOUR MESSAGE GOES IN HERE' );"		
    >a link.</A><BR>
Applied to  <SPAN onMouseOut="ClearFlyOver();"
     onMouseOver="FlyOver( 'YOUR MESSAGE GOES IN HERE' );">
<font color="#009900">highlighted text </font></SPAN>

www.technorealm.co.uk UK Web site design and graphics. A free resources site!