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

Text Link/Image Map Tooltip Script All

Credits: Dynamic Drive

Description: An easy-to-install tooltip script that allows your text links or image map to have a tooltip when the mouse moves over them!

Demo

Text link tooltip example:

WB01389_.gif (104 bytes) Dynamic Drive
WB01389_.gif (104 bytes) Website Abstraction
WB01389_.gif (104 bytes) Yahoo
WB01389_.gif (104 bytes) Cnet
WB01389_.gif (104 bytes) Techweb

Image Map tooltip example:


Directions: Developer's View

Step 1: Insert the below into the <body> section of your web page, right after the <body> tag itself, before anything else:


Giving text links a tooltip:
Having done the above, giving any text link a "tooltip" is a snap. Simply add the following code to the <a> tag of the link in question:

onMouseover="showtip(this,event,'Visit Dynamic Drive for DHTML Scripts!')" onMouseout="hidetip()"

with the part in red representing the text you want shown inside the tip. An example would be:

<a href="http://dynamicdrive.com" onMouseover="showtip(this,event,'Visit Dynamic Drive for DHTML Scripts!')" onMouseout="hidetip()">Dynamic Drive</a>

If the text inside the tooltip is very long, and you wish to "break it" (like the tip for Techweb above), simply add the <br> tag to the text. For example:

onMouseover="showtip(this,event,'Visit Techweb for the latest happenings<br>in the computer sector ')" onMouseout="hidetip()"

Giving image map a tooltip:
The process for giving your image map a tooltip is the exact same as for text links. Simply insert the same code after the href attribute of each image spot. For example:

<MAP NAME="FrontPageMap0">
<AREA SHAPE="RECT" COORDS="57, 78, 135, 138" HREF="http://www.webreference.com" onMouseover="showtip(this,event,'Click here for Webreference')"
onMouseout="hidetip()"
><AREA SHAPE="RECT" COORDS="103, 10, 174, 75" HREF="http://www.wsabstract.com" onMouseover="showtip(this,event,'Click here for Website Abstraction')"
onMouseout="hidetip()"
>

</MAP>
<img src="imagemap.gif" width="188" height="173" border="0" alt="imagemap.gif (14679 bytes)" usemap="#FrontPageMap0">

Note to Frontpage 98 (and other similar html editor) users:  In Frontpage 98, an image map is represented as a "bot", meaning that when you view the source of the image map within the editor, the href attribute of the individual spots are not revealed. This is a problem, since the tooltip code has to be inserted right alongside the href attribute. To get around this, open the file using a simple text editor. The href attribute will be present, allowing you to insert the tooltip script.

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