The best way to learn how to use something is to get your hands dirty and do it. Therefor this
documentation isn't very long, instead it provides some basic instructions and then
the command reference will be where you want dig deep.
That way you'll learn to do all the cool stuff yourself.
First of all you need to prepare the page that you will be using overLIB on. Add these
two lines inside the <body></body> section of your page. Preferably immediately when the
body section starts.
If you have other layers (<div>) on the page you might want to change the z-index. You must also change
overlib.js to the correct path if the files are not placed in the same directory.
There are two different types of popups that you can make
with overLIB. The first type is when the popup goes away after you move
your mouse away from a link. The other type sticks around afterwards. We
call these "stickies", or in singularis a "sticky". See the difference
here
and here.
Let's look into the code for the popup that went away quickly, or a tooltip which it often is called.
<a href="javascript:void(0);" onmouseover="return
overlib('This is an ordinary popup.');" onmouseout="return nd();">here</a>
Tooltip popup.
As you see this is no ordinary hyperlink as we've placed javascript:void(0); instead of an
url as href. This causes the browser not to load a new page when we click on the link. This
is of course optional. You can link to a page or anything else if you want.
In the onmouseover part overLIB comes in. Whichever type of popup you want to make you call the
overlib() function. It can take any amount of parameters. You'll understand why that is good
soon. To make a simple popup we just pass the text we want to display to the function inside
single quotes.
After that comes onmouseout. It contain one cryptic function that has to be there. The call to the nd()
function makes the popup go away when you move the mouse outside the link. You still have
to have it there when making stickies though.
Now let's look at the popup that stayed after the mouse was moved away from the link - the sticky popup.
<a href="javascript:void(0);" onmouseover="return
overlib('This is what we call a sticky, since I stick around.', STICKY);"
onmouseout="return nd();">here</a>
Sticky popup.
The only difference between the two of them (except for the text passed) is that the sticky one
has more text after the text inside quotes. This is called a command. In this case it is the STICKY command
which tells overLIB that we want the popup to stick around.
Now that you know the really basic parts lets look at a bit tougher stuff. You remember from
the frontpage that you could click on links and make a popup show up then? This isn't hard
either. You just place the overLIB code in onclick instead of onmouseover. (Or both.) Here
is an example:
Click here!
Lets digest the code again:
<a href="javascript:void(0);" onclick="return
overlib('This is a sticky with a caption. And it is centered under the mouse!',
STICKY, CAPTION, 'Sticky!', CENTER);" onmouseout="nd();">Click here!</a>
Clickable popup
Here we have the overlib() call in onclick instead, and we have lots more commands!
Just as STICKY is a command that tells overLIB to make the popup sticky, the other ones tell overLIB to
do other things. The first command to a popup is always just a text string inside of single quotes.
(This is not entirely true, experienced codes can read about INARRAY in the command reference.).
Following that you can pass any command you want to overLIB. In any order you want. Some commands expect to receive
more than just a command though, it also want some data. When that is the case the next
parameter is expected to be that data. Some commands also expect more than just one parameter.
Lets go through the commands in this call to see what actually happens. First we have STICKY
that tells overLIB that this popup should be a sticky and stay around. Followed by that is
CAPTION and its parameter 'Sticky!'. This tells overLIB that we want a caption on the popup
and that that caption should be Sticky!. After that the last command is CENTER which tells
overLIB to place the popup centered under the mouse pointer.
You can customize overLIB in three different ways. The first method you already know, by passing commands.
However if you want all the popups to be red and use a larger font, it isn't very fun to pass a bunch of commands
for each and every popup. The commands you pass only last for one specific popup and commands are intended
when you want something different than the ordinary.
To set site-wide (all pages using the same overlib.js) defaults just open up overlib.js in your favourite text editor.
In it, look for "Configuration". There you can change javascript variables to change the defaults. The variables you
should change all start with ol_ and there is a description on how you change each of them. They look like this:
// Font face for the main text
if (typeof ol_textfont == 'undefined') { var ol_textfont = "Verdana,Arial,Helvetica";}
Default font in overlib.js.
In the command reference
you can also see which variable that each command overrides. Changing settings in overlib.js is the smartest and
most effective way of using overLIB. Use it whenever you can.
When you need to make changes to many popups on one specific page, you can do that on the page. Simply assign
the variable you want to have a page default for and place that JavaScript code before loading overlib.js. Here's
how it looks:
Now that you know the basics how the overlib() function works, as well as how you can change the settings
in the script or on the page as well, you are ready to start having fun with all the advanced features overLIB has
to offer you. The command reference has all the commands overLIB understands
(there are more than 50!) and it where you will find information on how to use them.
Don't worry, you're not the first. Before you start looking for help though, try going through the manual again and
trying out the examples etc. Also make sure you use an "empty" page that doesn't have any other JavaScript's, applets
and the like on it. Make a page with just overLIB first and then try the more complex things.
When things just don't work, there are ways of getting help though. Take a look at overLIB's
support page and see what fits you.
