onMouseover Tooltips | ![]() |
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!