ALTTXT Tooltip Script v-1.6

This script displays a little 'tooltip' near any link you want similar to the ALT HTML attribute. These box will always stay within the window boundaries to avoid creating any new scrollbars. This script is designed to be run in IE4+, NS4x, and NS6. However, there are some features that will not work in NS4.

Over 2000+ free Javascript

at JavaScriptBank.com Website

Sampled by JavaScriptBank.com

Description

Features

In which browser
will this run?

V 1.2: Added fading effect for ie4+ and ns6+ only. Optimized the code a bit.
V 1.3: Added "mousefollow" mode. See details below.
V 1.4: Removed "center" option. Added "xoffset" & "yoffset" variables instead for finer customization.
V 1.5: Made it so the "yoffset" variable actually did what it was supposed to. Also added functions for toggling a few settings.
V 1.6: Added a "locking" feature so if you have links inside the box, the script lets you click them (only when mousefollow is set to false). And, you can set the padding attribute (visible in ie4+ and ns6 only).

Another effect...

Click here to toggle "mousefollow" mode. Uses the toggle_mousefollow() function.

Click here to toggle "dofade" mode. Uses the toggle_dofade() function.

Click here to toggle "centertext" mode. Uses the toggle_centertext() function.

INSTRUCTIONS

1: Copy and paste the following style declaration in the HEAD section of your page, then edit the style attributes to suit:

Select all...

2: Copy and paste the following script in the HEAD section of your page:

Select all...

3: Copy and paste the following HTML at the end of the BODY section of your page. Note: you can only adjust the padding attribute in here. Setting it in the style sheet in step 1 will cause strange results in NS4.

Select all...

4: Lastly add the mouseover/mouseout event handlers to each link that you want this effect for. Example:

<a href="http://jsbank.beplaced.com" onmouseover="writetxt('Visit my website')" onmouseout="writetxt(0)">Link text</a>

You can also put these event handlers in IMG tags, SPAN tags, DIV tags, etc, but NS4 will not respond to those events. It won't produce errors though.

There are 6 settings in the js file you can set to control the way the script behaves. Just edit the js file to change them:

dofade - Set to true to enable the fade in effect, set to false to disable it. This feature only works in ie4+ and ns6+.
centertext - Set to true to center the text in the box, set to false to left-justify the text. This normally could simply be changed with the style definition but Netscape4.x has problems with this, so this is a reluctant workaround.
xoffset - Sets the horizontal pixel offset from the mouse. Fine-tune this value to get the best result.
yoffset - Same as above, but sets the vertical offset from the mouse.
mousefollow - Enables mouse follow mode where the box continues to follow the mouse. Setting to false will cause the box to appear near the mouse but will not continue to follow the mouse.
hideDelay - Functional only when mousefollow is set to false, sets the delay (in milliseconds) from when the user hovers away from the link, to when the box disappears. This is so you can include clickable links in the alttxt box.

You can cause a box not to disappear once the mouse leaves the link by simply omitting the onmouseout="writetxt(0)" part. This will cause the current box to remain visible. This is best used when "mousefollow" mode is disabled (set to false). Otherwise, the onmouseout="writetxt(0)" is required to cancel the box when it leaves the link.

A note about the content of these boxes. If you need to use quotes for HTML tags or whatever, they must be escaped with a backslash ( \ ). This prevents the script from thinking the quotes you use is the end of the content and producing errors.

You can also use the character entity in place of double quotes. Instead of using ", try using "

So, lets say you want to include a link inside an alttxt box, you could write something like:

<a href="http://www.your_link.com" onmouseover="writetxt('<a href="http://www.anotherpage.com">LINK TEXT</a>')" onmouseout="writetxt(0)" > Alttxt link... </a>