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 Script

Author: Dynamic Drive

Description: Use this script to provide textual information about a link(s)! Move the mouse over certain links, and accompanying text appears on the page describing the link. The text can be HTML based (bold, italic etc). Browsers other than NS 4 or IE 4+ will simply not see any text.

Demo:

DHTML Script categories
back.jpg (6787 bytes)
.
handico.gif (184 bytes) Link to us! If you find this site helpful, please help us spread the word by linking to us. Click here for more information.

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!


Directions: Developer's View

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).

Select All

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.

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

Having done all that, you now need to do some "tweaking" to both the first and second part. Hang in there.

In the first part, you need to configure the links to your own. You can virtually change everything inside, except for the outer <div> tag. Do not alter that tag in any way! Also, you'll notice that inside each <a> tag, there is a onMouseover event handler, something like the below:

onMouseover="changetext(content[0])"

This command is used to trigger the script to display the appropriate text inside part 2. "content[0]" informs it to display the text stored inside content[0] Change that variable, depending on each link.

In part 2, you need to change the width and height attributes inside BOTH the <ilayer> and <layer> tag to the desired dimensions of the textual tooltip. Set it to the maximum required dimension to accommodate the longest tooltip. Why all this hassle? Well, in Netscape, once you define an area, you cannot dynamically alter the dimensions of that area to accommodate content of different sizes. Therefore, you need to define from the start the dimensions of the area to be able to accommodate the largest content.

Note: This script accesses the body onload event, which, if another script on your page does the same, one will not function. Click here to learn how to resolve this type of conflict.

That's it. You're done!