About This Product
Metachecker.net | FontsMadeEasy.com | RankChecker.net
| Over 5000 Free Fonts | Tutorials | Javascript Forum | Other Javascript Resources | Cheat Sheet

Textual tooltip II


Description: This is version two of the original textual tooltip script. The good news about this script is that it works in BOTH IE 4 and NS 4. The bad news is that it is a little harder to setup, and misses an important feature found in the original script. The area that will display the tooltip (in the below demo, the very right table cell) cannot contain a default text that will be shown when the mouse is NOT over any links or moves out of the links. It has to be blank. You'll notice that in the original script, there is a default text that is shown during these times. If you have a large audience of NS 4 users, this is definitely the script to go with.

Step 1: Insert the below into the <Head> section of the page. In it, you'll see the variable "content[]". which stores the HTML text associated with each link (in the above demo, 9 of them, since there are 9 links).

Insert into <HEAD>

Step 2: Ok, this is where things get a little dirty. 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 gray area), and 2) another area used to display the text associated with the links (in this case, the table cell on the very right). Still with me? 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 the left table cell.
Insert into <BODY>

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):
Insert into <BODY>

Other Options