Put Overlib TEXT into an Array of Strings
Return to the Index
I'm now getting lost keeping track of all the names of the String Variables that I created.
If you are comfortable using string variables for OverLIB TEXT, then you will appreciate the added convenience of using an ARRAY of strings. If you are NOT yet comfortable, look at Part II before you continue here. The examples on this page build upon the examples in Part II.

Mouse over the yellow highlights.

We will simplify our html, by putting the OverLIB TEXT argument into an element of a javascript array.
  1. Refresher. This is the way we built a popup in a javascript string variable.

    <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>


  2. Next, we will declare an ARRAY of strings, and put this same TEXT into one slot in the array. It doesn't matter which position in the array you use. Arrays are infinitely large.

    <script language="javascript">
       var kerms = new Array();
       kerms[5]
    = "<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(kerms[5],FGCOLOR,'yellow',STICKY,TIMEOUT,10000)"
      onmouseout="nd()"> FROG [5] </a>


  3. Now, let's show all 5 examples from Part II in the ARRAY. To make a point, we will renumber the array elements randomly. This might happen to you if you have rearranged the page many times.

    <script language="javascript">
       var kerms = new Array();
       kerms[7]
    = "It is not that easy being green";
       kerms[13] = "It's not that easy being green";
       kerms[19] = "It's not that easy being <b><font color='#20c040'>green</font></b>";
       kerms[2] = "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>";
       kerms[25] = "<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(kerms[7],FGCOLOR,'yellow')"
      onmouseout="nd()"> FROG [7] </a>
    <a href="javascript:void(0)"
      onmouseover="return overlib(kerms[13],FGCOLOR,'yellow')"
      onmouseout="nd()"> FROG [13] </a>
    <a href="javascript:void(0)"
      onmouseover="return overlib(kerms[19],FGCOLOR,'yellow')"
      onmouseout="nd()"> FROG [19] </a>
    <a href="javascript:void(0)"
      onmouseover="return overlib(kerms[2],FGCOLOR,'yellow',STICKY,TIMEOUT,10000)"
      onmouseout="nd()"> FROG [2] </a>
    <a href="javascript:void(0)"
      onmouseover="return overlib(kerms[25],FGCOLOR,'yellow',STICKY,TIMEOUT,10000)"
      onmouseout="nd()"> FROG [25] </a>


  4. Array elements do not HAVE to be indexed by number. They can be indexed with simple strings, which makes it a lot easier to keep track of the content of each element.

    <script language="javascript">
       var kerms = new Array();
       kerms['it is']
    = "It is not that easy being green";
       kerms['its'] = "It's not that easy being green";
       kerms['green'] = "It's not that easy being <b><font color='#20c040'>green</font></b>";
       kerms['lyricslink'] = "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>";
       kerms['frogPix'] = "<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(kerms['it is'],FGCOLOR,'yellow')"
      onmouseout="nd()"> FROG ['it is'] </a>
    <a href="javascript:void(0)"
      onmouseover="return overlib(kerms['its'],FGCOLOR,'yellow')"
      onmouseout="nd()"> FROG ['its'] </a>
    <a href="javascript:void(0)"
      onmouseover="return overlib(kerms['green'],FGCOLOR,'yellow')"
      onmouseout="nd()"> FROG ['green'] </a>
    <a href="javascript:void(0)"
      onmouseover="return overlib(kerms['lyricslink'],FGCOLOR,'yellow',STICKY,TIMEOUT,10000)"
      onmouseout="nd()"> FROG ['lyricslink'] </a>
    <a href="javascript:void(0)"
      onmouseover="return overlib(kerms['frogPix'],FGCOLOR,'yellow',STICKY,TIMEOUT,10000)"
      onmouseout="nd()"> FROG ['frogPix'] </a>


  5. and FINALLY, if you have a number of OverLIB calls which are symmetric, you can write a "shell" function to call overlib(), and further reduce the amount of "clutter" in the page html. This technique is particularly useful in assuring that all the calls are identical and no quotes or parens are dropped as you go about your usual cut-and-paste.

    <script language="javascript">
       var kerms = new Array();
       kerms['it is']
    = "It is not that easy being green";
       kerms['its'] = "It's not that easy being green";
       kerms['green'] = "It's not that easy being <b><font color='#20c040'>green</font></b>";
       kerms['lyricslink'] = "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>";
       kerms['frogPix'] = "<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>";
       function myOL1(idx){
           return overlib(kerms[idx],FGCOLOR,'yellow');
       };
       function myOL2(idx){
           return overlib(kerms[idx],FGCOLOR,'yellow',STICKY,TIMEOUT,10000);
       };

    </script>

    <a href="javascript:void(0)"  onmouseout="nd()"
      onmouseover="return myOL1('it is')">   FROG ['it is'] </a>
    <a href="javascript:void(0)"  onmouseout="nd()"
      onmouseover="return myOL1('its')">   FROG ['its'] </a>
    <a href="javascript:void(0)"  onmouseout="nd()"
      onmouseover="return myOL1('green')">   FROG ['green'] </a>
    <a href="javascript:void(0)"  onmouseout="nd()"
      onmouseover="return myOL2('lyricslink')">   FROG ['lyricslink'] </a>
    <a href="javascript:void(0)"  onmouseout="nd()"
      onmouseover="return myOL2('frogPix')">   FROG ['frogPix'] </a>


And now, a retrospective. Let's revisit the last example in Part I and compare it to the final <a ...> tag in #5 above. We have come a long way toward making our code readable and maintainable.

<a href="javascript:void(0)" onmouseover="return overlib('&lt;img src=\'kermithead.gif\' width=58 height=50 align=right&gt;It\'s not that easy being &lt;b&gt;&lt;font color=\'#20c040\'&gt;green&lt;/font&gt;&lt;/b&gt;&lt;br&gt; &lt; a href=\'http://www.niehs.nih.gov/kids/lyrics/green.htm\'  target=\'_new\' &gt; Click here for lyrics &lt; /a &gt;', FGCOLOR,'yellow',STICKY,TIMEOUT,10000)" onmouseout="nd()">FROG</a>


Postscript: If you want to

  • avoid clutter on your html page, or
  • use the same popup content on several different pages
then you can put the popup content into a separate file, and download that separate file into each page with the popups. (This actually saves download time, since the "popup-content" file will cached by your browser, and will not actually be downloaded for subsequent pages.)
    Use your text editor to make a separate file containing the TEXT strings array, and the helper functions.

    --------- new file "mytextstrings.js" -----------

       var kerms = new Array();
       kerms['it is'] = "It is not that easy being green";
       kerms['its'] = "It's not that easy being green";
       kerms['green'] = "It's not that easy being <b><font color='#20c040'>green</font></b>";
       kerms['lyricslink'] = "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>";
       kerms['frogPix'] = "<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>";
       function myOL1(idx){
           return overlib(kerms[idx],FGCOLOR,'yellow');
       };
       function myOL2(idx){
           return overlib(kerms[idx],FGCOLOR,'yellow',STICKY,TIMEOUT,10000);
       };

    --------- END OF new file "mytextstrings.js" -----------

    --------- In the HTML page -----------

    <head>
    <script language="javascript" src="mytextstrings.js" ></script>
    </head>

    <a href="javascript:void(0)"  onmouseout="nd()"
      onmouseover="return myOL1('it is')">   FROG ['it is'] </a>
    <a href="javascript:void(0)"  onmouseout="nd()"
      onmouseover="return myOL1('its')">   FROG ['its'] </a>
    <a href="javascript:void(0)"  onmouseout="nd()"
      onmouseover="return myOL1('green')">   FROG ['green'] </a>
    <a href="javascript:void(0)"  onmouseout="nd()"
      onmouseover="return myOL2('lyricslink')">   FROG ['lyricslink'] </a>
    <a href="javascript:void(0)"  onmouseout="nd()"
      onmouseover="return myOL2('frogPix')">   FROG ['frogPix'] </a>

Fini.

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