The Overlib TEXT String Part I

Variations in the OverLIB TEXT String
Return to the Index

Can I put any special markup into the OverLIB popup?
Can I put links and/or pictures into the OverLIB popup?

You certainly may put ANY HTML into the the TEXT argument of the overlib() call. However, be advised that some of your users may be using Norton Firewall. They will not see any special effects that involve html < tags > in the TEXT string. To satisfy those users, you will have to modify your work, as described below.

After you become comfortable with WHAT you can do, then go to Part II where we discuss a much simpler way to do it, using javascript string variables. I recommend that you do NOT make any serious modifications to your code until you understand Part I and then read Part II.

Mouse over the yellow highlights.

Classic OverLIB - FROG
Get the first word correct - FROG
NOTICE that we had to put a backslash in front of the apostrophe in "It's". That is because, if we simply wrote 'It's not that easy being green.', then this TEXT STRING would have THREE quote marks in it. The browser would read the string between the first two quotes ("It") and throw away the rest and/or generate an error. I can't demonstrate that - it would throw an error. IN GENERAL, if a popup doesn't display, an extra quote or apostrophe is the first thing to suspect.
Add selective color - FROG. If you are behind a Norton Firewall, you probably see this popup with broken tags displayed (or maybe not at all). See item #6 below.
NOTICE more complications. We had to put backslashes in front of the quotes surrounding the font color declaration. Same reason as above. The TEXT string now has five quote marks in it, but only the first and last delimit the string. The others must be "hidden" from the browser parser by the backslashes. Note how quickly the code for even a simple popup can become hard to read.
Now install a real link in the popup - FROG. If you are behind a Norton Firewall, you probably see this popup with broken tags displayed (or maybe not at all). See item #6 below.
NOTICE that we now have an <a ...> link within a popup within an <a ...> link. We've added 4 more quotes, with preceding backslashes. Note that the code for a 2 line popup is now nearly impossible to read.
We've also added STICKY, TIMEOUT, 10000 to the overlib() argument list. STICKY holds the popup when you mouse off the yellow link, so that the popup does not disappear while you are mousing to it to click the link in the popup. TIMEOUT, 10000 kills the STICKY popup after 10 seconds. There are other ways of closing a STICKY popup. But not here and now.
Finally, add an image - FROG. If you are behind a Norton Firewall, you probably see this popup with broken tags displayed (or maybe not at all). See item #6 below.
For the complete tutorial about the many ways to use pictures in popups (foreground, background, caption, text wrap, slideshow, etc.), visit the Images Tutorial.
Now we must deal with Norton Firewall - FROG. Norton Firewall destroys any < and > located within an <a ...> tag. To get around that, we must convert the < and > surrounding the , , , , , (internal) <a ...> and (internal) </a> tags to the < and > representation.
HELP REQUESTED: I don't have Norton Firewall, so I can't test the expected failure in #3, #4 and #5 above, nor the fix in this item. If YOU are reading this from behind Norton Firewall, please use the email link at the bottom to report what you are seeing. #3, #4 and #5 are probably broken. #6 should display correctly. Thanks.
The TEXT string is highlighted with a grey background. We'll simplify that and make it much more readable in Parts II & III.

This is a good time to get into the habit of counting PAIRS of SINGLE and DOUBLE quote marks. One of the sanity checks in a TEXT statement such as the one above is to be sure that all the quotes come in pairs (except for the quotes that are preceded with backslashes, which we want the html parser to ignore for now - but they also must be paired - except for the apostrophes.) There must always be an EVEN number of single quotes and an EVEN number of double quotes. AND NO LINE FEEDS. The entire expression

onmouseover="return overlib('...',FGCOLOR,'yellow',STICKY,TIMEOUT,10000)"

MUST be on one line. Any linefeeds in the html source code will bust up the quoting. If your text editor has line numbering, turn it on so you can tell the difference between line wrapping and "hard" new lines.

NOW, we are ready to simplify, by putting the OverLIB TEXT argument into a javascript string. Go to Part II.

Please let me know if you encounter problems.Modified by REB,June 1, 2004