Overlib Script (not mine)

I've gotten a great number of questions concerning the script that I use to provide the mouse over functions on my main web page. I am referring to the little caption windows that popup when you move the mouse cursor over some of the links. I did not write the Overlib Script and am not trying to take any of the credit for it, but since there have been so many inquiries I decided to put this page up to provide some of the basic uses for the script. The script was written by a gentleman named Erik Bosrup. If you find his script useful, you should send him an e-mail thanking him for his contribution.

Visit the overLIB homepage for more details on using the script and for getting the latest version.

There are three (3) steps in using the script:

(1) Place a div definition at the top of the page immediately following the body tag.
(2) Use the SCRIPT tag to load in the overlib javascript file (overlib.js).
(3) Provide handlers for the onMouseOver and onMouseOut events where you wish to use the script.


First, go ahead and download the overlib.js file.





Place the overlib.js file in the same folder on your web server as your html files are in. Now, we are ready to complete steps 1 and 2 above. Paste this code into your html just below your <body> tag:


Now, let's take a look at an example of step 3, providing the onMouseOver and onMouseOut handlers:

Simple Example

When you move the mouse pointer over the Simple Example link above you should see a small window popup with a message in it. Here is the HTML for the above example:


The href here is just a call to javascript:void(), which is just used as a placeholder. It has nothing to do with the functionality of the overlib library. The href can be any link you like. The work is done in the onMouseOver event handler. The line onMouseOver = "overlib('This is just a simple example of a box without a caption.')" is where the actual call is made to the overlib method that puts the popup box on the screen. As you can see, it only requires one argument: the text to be displayed in the box. The onMouseOut="nd()" line handles the onMouseOut event to remove the popup box when the mouse pointer is no longer hovering above the hyperlink. Without it, the popup box would remain on the screen, following the mouse pointer around like a puppy dog in the back yard.

Here is an example that utilizes the Captioning capability of the overlib library.

Caption Example

The Caption Example adds a caption to the popup box. This version of the onMouseOver event handler takes two (2) additional arguments: the word CAPTION and the text for the caption itself. onMouseOver="overlib('WinKeySim is a freeware program that adds keyboard macro functionality to other Windows programs.', CAPTION, 'WinKeySim (freeware)')" Note that single quote (') marks are used to surround all of the arguments except the CAPTION argument, which must not be surrounded with the quotes. Here is the HTML for the Caption Example:



There are lots of other options, such as using background images, placing the popup box at an absolute position on the screen, changing fonts, etc., but we will only look at one (1) more option here: HTML

HTML Example




Add inline HTML in place of the text in the first two (2) examples and use FULLHTML in place of the CAPTION argument to put HTML instead of a popup box. The sky is the limit, theoretically. I haven't tested advance things such as putting HTML to load an applet, create numbered lists, tables, etc., but it probably would work.

Here is the HTML for the HTML Example:


Another potential use for Overlib is for protecting images. Any surfer can grab your images off your site by simply right-clicking on them and choosing the save image option in the popup menu. But, by using Overlib to layer a transparent image over the actual image, you can trick the surfer into downloading an empty transparent image instead of your real image. Click here for an example of this in action.

As you can see, using the overLIB library is a very simple way to take advantage of complex layering techniques without knowing much about how layering works. And, best of all, the Overlib Script takes care of detecting which browser is in use, allowing you to concentrate on developing your page in a browser independent way. The result: popup windows using layering technology without the headaches!