Link Floatie script
Description: Link Floatie script lets you display a description of a link or related information in an interesting manner. A DHTML box gradually fades into view and positions itself in the lower right corner of the screen. The box can easily be set to only disappear after the viewer clicks a link, making it possible to use Link Floatie not as a tooltip but an information box. Furthermore, this box intelligently positions itself at the top of the screen instead of bottom if the floatie obstructs the link's view when the former appears.
Link Floatie work in IE4+, NS6+, Mozilla/Firefox, and Opera 7, though the fading effect is absent from Opera.
Demo (move your mouse over):
Coding Forums | JavaScript KitDirections:
Step 1: Insert the following code into the <head> section of your page:
Step 2: Insert the below code into the <body> section of your page:
As shown in the sample code of Step 2, to add a floatie to a link, just add the following inside the link's tag:
onMouseover="showfloatie('link text here', event)" onMouseout="hidefloatie()"
However, showfloatie() in fact
supports 3 additional parameters to allow you to modify the background color and
dimensions of that particular floatie instance. Below describes showfloatie() in
its entirety:showfloatie() function
showfloatie('link_text', event, 'optional_bgcolor', optional_width, optional_height)
As mentioned, the last 3 parameters are all optional. Here are a few sample callings:
1) showfloatie('<p>Some text</p>', event, 'lightblue')
2) showfloatie(floattext[0], event, '', 300, 200)
3) showfloatie('<b>I\'m the king of the world!</b>', event)
The 2nd example shows how you can pass in a variable containing the desired text as the 1st parameter instead of the actual text. Do this if your text content is long, as using a variable is more reliable as far as avoiding syntax errors. The 3rd example shows that if your text contains apostrophes, you'll need to backslash them (ie: I\'m).
Creating a floatie that doesn't disappear onMouseover
You can create a floatie that isn't automatically dismissed onMouseout, so to create a "information box" so to speak. Simply remove the onMouseover portion of the code. For your floatie text, you'll want to add a "Close box" link:<a href="javascript:hidefloatie()">Hide Box</a>
This is illustrated in the code of Step 1.