Adding Free Javascript to a Web Site
Dynamic Drive is a resource on the web that provides free HTML and Javascripts for use on web sites. It is a reliable source and very easy to use. This tutorial provides step-by-step instructions on how to use just one of the multitude of free scripts available on this site - a balloon tooltip that will enhance any site.

Step One: Select a Catagory

Go to Dynamic Drive at http://www.dynamicdrive.com/ to select a script catagory (please use the browser "Back" navigation to return to this tutorial).

For this tutorial, select the catagory "Links & Tooltips". (See Figure 1)

Figure 1

Step Two: Select a Script

Dyanmic Drive provides a brief description of each script for users to browse through.

For this tutorial, select "Rich HTML Balloon Tooltip". (See Figure 2)

Figure 2

Step Three: View Script Details

Dynamic Drive provides a detailed description of each script, including a list of supported browsers and a demonstration. (See Figure 3)

The selected Javascript in this tutorial creates a balloon that appears over selected links. Any number of balloons can be used on one site. Each balloon can include text, an image, or a combination of both. A site can utilize any number of balloons, and each balloon is unique.

Figure 3

Step Four: Follow Usage Directions

Dynamic Drive provides directions for the use of each Javascript in its collection. In this case, the user must follow several steps.

First, save four files into the webpage directory: One Javascript file ("balloontip.js"), one Cascading Style Sheet file ("balloontip.css"), and two image files ("arrowup.gif" and "arrowdown.gif").
Note: "balloontip.css" is a cascading style sheet file that controls the text and standards in each tooltip. A separate CSS file should control the actual web page.

Next, copy and paste code into the Head section of the webpage.

Last, copy and paste sample code for links into the Body section of the page. (See Figure 4)

Figure 4
Figure 4a shows the code for a basic page, using this tooltip. Note: There is a missing image on the test page for the first link. The user must supply an image for this version of the tool tip.

The blue text is the copied code for the Head section, the red text for the Body section.

Figure 4a

Step Five: Customize

The script is easily customized to work in any site. (See Figure 5) Scroll down to view the customized code.

Figure 5
Figure 5a shows the basic code, customized. The changes are indicated in black text. Changes in the Body section provide links to "balloon1.html" and "balloon2.html".

The image source for balloon 1 changes to "shape.gif". This newly created image of a red hexagon is stored in the web site directory. The border for this image changes to white.

The balloon 2 width changes to 150, and the background to light blue.

Please note that no code in the Head section is altered, and that legal credit to Dynamic Drive remains in the code.

Figure 5a

Step Six: Test the Code

Open the HTML page in a browser to view the adjustments.
Here is the code test for Test balloon #1. The code was adjusted to display a hexagon in the balloon with a white border.

Here is the code test for Test balloon #2. The code was adjusted for a balloon width of 150 and a background color of light blue.
Text for test balloon #1.
Text for test balloon #2.

Step Seven: Experiment!

Don't be afraid to adjust the code to customize and experiment further with different visual effects on your site. If you make a mistake, don't worry - just go back and try again. The best way to learn about HTML code, Javascript and CSS is to spend time adjusting and altering.

Back to the top