- 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>
- 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.
- 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 < and >, 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.
- 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.
- 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>
- 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)