New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:

FF1+ IE5+ Opr7+

Link Floatie script

Author: Dynamic Drive

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 Kit


Directions: Developer's View

Step 1: Insert the following code into the <head> section of your page:

Select All

Step 2: Insert the below code into the <body> section of your page:

Select All

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.