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

Textual tooltip

Welcome to our new look!
Hope you like the new look for Dynamic Drive. This is the first in a series of steps we're taking to improve our site. In the very near future, you can expect many cool features such as a new forum, newsletter, feedback form, and more, to be introduced. Enjoy!


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: 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