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

FF1+ IE5+ Opr7+

Textual tooltip II (fade into view)

Description: Welcome to version two of the original textual tooltip script, which fades into view descriptive text when the mouse moves over their corresponding links. Effect visible in NS4+ (including NS 6) and IE 4+.

Demo:

JavaScript Kit

Freewarejava.com

Dynamic Drive
.


Directions:

Ok, the directions get a little complicated, so pull up a chair, and read them carefully! It would have been easier if we simply gave you the entire script-with the HTML codes-all at once, but we figured you would want to be able to customize it to fit the layout of your own page, so the below directions keeps that in mind (aren't we considerate)?

Step 1: Download the following .js file, and upload into your webpage directory:

AnimatedFader.js (download by clicking it, or clicking with Shift key depressed in NS)

Step 2: Insert the below script into the <HEAD> section of your page:

Select All

Step 3: Take a look at the above demo. The "structure" of it consists of two parts-1) an area containing the links (in this case, the three links to the left), and 2) another area used to display the text associated with the links (in this case, the table cell to the very right).

The below code contains the first part, where your links should go. Copy and paste it where you wish the links to appear on the page. In the demo, we pasted it into a left table cell.

Select All

Moving along, the below code contains the second part, where the text will appear when the mouse moves over each link. Copy and paste it where you wish it to appear on the page (in the above demo, we pasted it into the right table cell):

Select All

You're done, configurations aside, at least.

Configuring the script

-To change the fade in color from "black" to another, configure the code of Step 1
-To configure the links and their corresponding text description, configure the code of Step 2 part 1
-To configure the dimensions of the container that displays the text description, change the width/height attributes inside code of Step 2 part 2