Put Overlib TEXT into a String Variable
Return to the Index
I heard that it is easier to write long popup text as a javascript string variable. How do I do that?
There are a number of reasons to move the TEXT of a popup out of the argument list and into a string variable (or array). Here are a few of the reasons:
  1. It makes the code within the <a ..> tag easier to read.
  2. It is an easier method of handling TEXT strings that include embedded quotes or apostrophes.
  3. It resolves the problem that complex popups do not work if the user is behind a Norton Firewall.
  4. It makes maintenance a little easier, since the text of all the popups are together in the <head> of the page.
If you are comfortable using html tags inside popups, then you will appreciate the convenience of using javascript variables. If you are NOT yet comfortable, look at Part I before you continue here. The examples on this page build upon the examples in Part I.

Mouse over the yellow highlights.

We will simplify our html, by putting the OverLIB TEXT argument into a javascript string.
  1. Declare a variable in <head> and assign the TEXT to it.

    <head>
    <script language="javascript">
       var ker01 = "It is not that easy being green";
    </script>
    </head>

    In the <body>, use the variable as the first argument in the overlib() call. No quotes.

    <body .....>

    <a href="javascript:void(0)"
      onmouseover="return overlib(ker01,FGCOLOR,'yellow')"
      onmouseout="nd()"> FROG 1 </a>

  2. Install the apostrophe

    <script language="javascript">
       var ker02 = "It's not that easy being green";
    </script>

    <a href="javascript:void(0)"
      onmouseover="return overlib(ker02,FGCOLOR,'yellow')"
      onmouseout="nd()"> FROG 2 </a>

    NOTICE that we no longer need the backslash in front of the apostrophe in "It's". We have eliminated one layer of quoting, so we use double quotes around the string, and single quotes/apostrophes inside, without confusing the browser.

  3. Add color

    <script language="javascript">
       var ker03 = "It's not that easy being <b><font color='#20c040'>green</font></b>";
    </script>

    <a href="javascript:void(0)"
      onmouseover="return overlib(ker03,FGCOLOR,'yellow')"
      onmouseout="nd()"> FROG 3 </a>

    NOTICE that we no longer need the backslash in front of the quotes in <font color= >. AND, we no longer need to coerce the < and > to &lt; and &gt;, because Norton Firewall can't "see" the font tag (inside the <a ...> tag). The Firewall simply doesn't know that var ker03 will be placed inside the overlib() argument list by the browser.

  4. Add the link inside the popup

    <script language="javascript">
       var ker04 = "It's not that easy being <b><font color='#20c040'>green</font></b>"+
             "<br>"+
             "<a href='http://www.niehs.nih.gov/kids/lyrics/green.htm'  target='_new' "+
             ">Click here for lyrics</a>";
    </script>

    <a href="javascript:void(0)"
      onmouseover="return overlib(ker04,FGCOLOR,'yellow',STICKY,TIMEOUT,10000)"
      onmouseout="nd()"> FROG 4 </a>

    Now would be a good time to get comfortable with javascript "string concatenation". It makes the variable much more readable, because you can write the TEXT content with line feeds and indents - to look like basic html. The "all on one line" rule is lifted. Read any javascript textbook.

  5. Finally, add the picture in the popup

    <script language="javascript">
       var ker05 = "<img src='kermithead.gif' width=58 height=50 align=right>"+
             "It's not that easy being <b><font color='#20c040'>green</font></b>"+
             "<br><a href='http://www.niehs.nih.gov/kids/lyrics/green.htm' target='_new'>"+
             "Click here for lyrics</a>";
    </script>

    <a href="javascript:void(0)"
      onmouseover="return overlib(ker05,FGCOLOR,'yellow',STICKY,TIMEOUT,10000)"
      onmouseout="nd()"> FROG 5 </a>

      Someone asked about using onclick= INSIDE the popup to change an image INSIDE the popup. If you are interested, go here.
  6. We've been naming each of these TEXT strings with a different variable name. Because the variables (and their contents) are disassociated from the <a...> links, it is very easy to mix, rearrange, and duplicate the calls to these popups, with a minimum or work.

    FROG 5 xx FROG 2 xx FROG 3 xx FROG 1 xx FROG 4 xx FROG 3 xx MIDI

If you have a LOT of popups, you may find it easier to use arrays. This ADVANCED TECHNIQUE is discussed in (optional) Part III.
Comments, suggestions, feedback, success, failure? Let us know