We will simplify our html, by putting the OverLIB TEXT argument into an element of a javascript array.
- 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>
- 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>
- 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>
- 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>
- 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('<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 >', 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.
|