Dynamic Drive DHTML code library!
Dynamicdrive.com


Home  What's new  What's Hot  Forum  FAQs  Submit a script!

.
reallybig network
Back to Network
Content Areas
reallybig.com
Web site

The largest directory of Web building resources on the internet!
BigNoseBird
FREE CGI scripts, tutorials, essential HTML tricks and much more!
Font Pool
More than 1000 truetype FONTS for PC & MAC!
Dynamic Drive
Add power to your site with free original, ultra cool DHTML scripts.
Features
Instant
Web Graphics

Quick and easy way to give your pages a nice, uniform look.
Cartoon Fonts
These are REALLY NICE, and look great anywhere.
The 216-Color Webmaster's Palette
See it for the first time.
Great Text Effects
Easy pop-ups & rollovers, all cut-n-paste, all very cool.
Internet Traffic
Report

Does your connection sometimes seem a little slow? Find out what conditions are like throughout the internet.
Sponsor Info
Click here if you would like to advertise on the reallybig.com network.
Link to Dynamic Drive!
Link to DD!

Home Small4.gif (1046 bytes) Links and buttons Small4.gif (1046 bytes) Here

Textual tooltip II (Cross browser) All

Credits: Dynamic Drive

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.

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.

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


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.


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


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. In IE 4, there is no such limitation, that's why in the original textual tooltip script, you don't need to go through this process.

That's it. You're done!

small4.gif (1046 bytes) Legend
All- Script works with Netscape 4+ AND Internet Explorer 4+
NS- Indicates script works with Netscape 4 and above
IE- Indicates script works with Internet Explorer 4 and above
IE5- Indicates script works with Internet Explorer 5 and above

Subscribe to our newsletter!
Want to be right here when new scripts are added? Subscribe to our FREE newsletter then!

Copyright © 1998, 1999 Dynamic Drive. Please read Terms Of Use here before using any of the scripts.

Virtualis web Hosting