Table of contents :

The script parts highlighted in red are the ones you can customize.

• HEX-RGB converter
• copy and paste this code into the HEAD of your HTML document :

<SCRIPT LANGUAGE="JavaScript">
function NumToHex(num1,num2) {
strNum=document.forms[0].elements[num1].value;
for(i = 0; i < strNum.length; i++) {
chr=strNum.substring(i, i + 1);
if((isNaN(chr))||(chr == ' ')) {
alert('You must enter a digit between 0 and 9!');
document.forms[0].elements[num1].select();
document.forms[0].elements[num2].value='';
return false;
   }
}
if(strNum > 255) {
alert('You must enter a number between 0 and 255!');
document.forms[0].elements[num1].select();
document.forms[0].elements[num2].value='';
return false;
}
else {
base = strNum / 16;
rem = strNum % 16;
base = base - (rem / 16);
baseS = MakeHex(base);
remS = MakeHex(rem);
document.forms[0].elements[num2].value=baseS + '' + remS;
ChangeBackground(3, 4, 5);
return true;
   }
}
function MakeHex(x) {
if((x >= 0) && (x <= 9))
return x;
else {
switch(x) {
case 10: return "A";
case 11: return "B";
case 12: return "C";
case 13: return "D";
case 14: return "E";
case 15: return "F";
      }
   }
}
function HexToNum(num1,num2) {
numberS = document.forms[0].elements[num1].value;
tens = MakeNum(numberS.substring(0,1));
if(tens == 'X') {
document.forms[0].elements[num1].select();
document.forms[0].elements[num2].value='';
return false;
}
ones = 0;
if(numberS.length > 1) // means two characters entered
ones=MakeNum(numberS.substring(1,2));
if(ones == 'X') {
document.forms[0].elements[num1].select();
document.forms[0].elements[num2].value='';
return false;
}
document.forms[0].elements[num2].value = (tens * 16) + (ones * 1);
document.forms[0].elements[num1].value = document.forms[0].elements[num1].value.toUpperCase();
ChangeBackground(3, 4, 5);
return true;
}
function MakeNum(str) {
if((str >= 0) && (str <= 9))
return str;
switch(str.toUpperCase()) {
case "A": return 10;
case "B": return 11;
case "C": return 12;
case "D": return 13;
case "E": return 14;
case "F": return 15;
default:  alert('You must choose a number between 0 and 9 or a letter between A and F!');
return 'X';
   }
}
function ChangeBackground(num1, num2, num3) {
document.bgColor = '#'+document.forms[0].elements[num1].value + document.forms[0].elements[num2].value + document.forms[0].elements[num3].value;
}
</script>
• copy and paste this code into the BODY of your HTML document :

<form>
<table border=1 align=center cellpadding=10 bgcolor=white>
<tr>
<th>Color/Code</th>
<th>Red</th>
<th>Green</th>
<th>Blue</th>
</tr>
<tr>
<th>0-255</th>
<td><input type=text name=rr_num size=4 maxlength=3 onKeyUp="return NumToHex(0,3);"></td>
<td><input type=text name=gg_num size=4 maxlength=3 onKeyUp="return NumToHex(1,4);"></td>
<td><input type=text name=bb_num size=4 maxlength=3 onKeyUp="return NumToHex(2,5);"></td>
</tr>
<tr>
<th>HEX</th>
<td><input type=text name=rr_hex size=4 maxlength=2 onKeyUp="return HexToNum(3,0);"></td>
<td><input type=text name=gg_hex size=4 maxlength=2 onKeyUp="return HexToNum(4,1);"></td>
<td><input type=text name=bb_hex size=4 maxlength=2 onKeyUp="return HexToNum(5,2);"></td>
</tr>
</table>
</form>

Color/Code	Red	Green	Blue
0-255
HEX

• animated image tooltip
• copy and paste this code into the HEAD of your HTML document  -->

<SCRIPT LANGUAGE="JavaScript">
function showtip2(current,e,text){
  if (document.all&&document.readyState=="complete"){
    document.all.tooltip2.innerHTML='<marquee style="border:1px solid black">'+text+'</marquee>'
    document.all.tooltip2.style.pixelLeft=event.clientX+document.body.scrollLeft+10
    document.all.tooltip2.style.pixelTop=event.clientY+document.body.scrollTop+10
    document.all.tooltip2.style.visibility="visible"
}
  else if (document.layers){
    document.tooltip2.document.nstip.document.write('<b>'+text+'</b>')
    document.tooltip2.document.nstip.document.close()
    document.tooltip2.document.nstip.left=0
    currentscroll=setInterval("scrolltip()",100)
    document.tooltip2.left=e.pageX+10
    document.tooltip2.top=e.pageY+10
    document.tooltip2.visibility="show"
}
}
function hidetip2(){
  if (document.all)
    document.all.tooltip2.style.visibility="hidden"
    else if (document.layers){
    clearInterval(currentscroll)
    document.tooltip2.visibility="hidden"
}
}
</script>
• copy this code into the BODY of your HTML document :

<div id="tooltip2" style="position:absolute;visibility:hidden;clip:rect(0 150 50 0);width:150px;background-color:gold;z-index:10"></div>
<div align="CENTER" name="divTest" onMouseover="showtip2(this,event,'Insert your animated tooltip!');" onMouseout="hidetip2();" STYLE="cursor: hand">
<TABLE border="0" cellpadding="0" cellspacing="0"><TR><TD COLSPAN="7">
<IMG SRC="image.gif" WIDTH="100" HEIGHT="39" BORDER="0"><p>
</TABLE>
<p></div>
• page reload on resize : useful for situations when a page resize moves the page elements improperly or causes JavaScript errors, which has been known to occasionally occur on pages with layers. Insert the onLoad event handler into your BODY tag :

<BODY onResize="window.location.href = window.location.href;">
• written greeting based on user's time of the day : copy and paste this code into the BODY of your HTML document :

<SCRIPT LANGUAGE="JavaScript">
datetoday = new Date();
timenow=datetoday.getTime();
datetoday.setTime(timenow);
thehour = datetoday.getHours();
if (thehour > 18) display = "Evening";
else if (thehour >12) display = "Afternoon";
else display = "Morning";
var greeting = ("Good " + display + "!");
document.write(greeting);
</script>
• audio and written greeting based on user's time of the day :
• copy and paste this code into the HEAD of your HTML document  -->

<SCRIPT LANGUAGE="JavaScript" src="AudioGreeting.js"></script>
• create a separate file called "AudioGreeting.js" and put this code into it :

var d = new Date()
var h = d.getHours()
if (h < 12) document.write('<bgsound SRC="Goodmorning.wav" AUTOSTART=true LOOP=1>'+'Good morning!')
else if (h < 17) document.write('<bgsound SRC="Goodafternoon.wav" AUTOSTART=true LOOP=1>'+'Good afternoon!')
else if (h < 24) document.write('<bgsound SRC="Goodevening.wav" AUTOSTART=true LOOP=1>'+'Good evening!')
• play a .WAV sound file when the user clicks a link : copy the following between the <BODY> and </BODY> tags :

<center>
<a href="#" onMouseOver="document.all.music.src='talk.wav'">You Talkin' To Me?</a><p>
<a href="#" onMouseOver="document.all.music.src='laugh.wav'">Laughing</a><p>
<a href="#" onMouseOver="document.all.music.src='shoot.wav'">Come Out</a><p>
<a href="#" onMouseOver="document.all.music.src='sweet.wav'">Sweet</a><p>
<a href="#" onMouseOver="document.all.music.src='hell.wav'">Go To Hell!</a><p>
<bgsound src="#" id=music loop=1 autostart="true">
</center>
• page up for ...
• copy and paste this code into the HEAD of your HTML document

<SCRIPT LANGUAGE="JavaScript">
function HowLongSince(startmonth, startdate, startyear) {
sdate=startdate;
smonth=startmonth-1;
syear=startyear;
var DaysInMonth = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
today = new Date()
var thisyear = today.getFullYear();
var thismonth = today.getMonth();
var thisdate = today.getDate();
mstart = new Date(syear,(smonth==12?1:smonth+1),1);
days1 = (mstart - new Date(syear,smonth,sdate))/(24*60*60*1000)-1;
mend = new Date(thisyear,thismonth,1);
days2 = (new Date(thisyear,thismonth,thisdate) - mend)/(24*60*60*1000)+1;
dayst = days1 + days2;
if (dayst >= DaysInMonth[smonth])  {
AddOneMonth = 1;
dayst -= DaysInMonth[smonth];
}
else AddOneMonth = 0;
ydiff1 = thisyear-mstart.getFullYear();
mdiff1 = thismonth-mstart.getMonth()+AddOneMonth;
if (mdiff1 >11) { mdiff1=0; ydiff1++; }
if (mdiff1 < 0) { mdiff1 = mdiff1 + 12; ydiff1--; }
temp = (ydiff1==0?"":(ydiff1==1?ydiff1+" year and ":ydiff1 + " years, "));
temp += (mdiff1==0?"0 months, and ":(mdiff1==1?mdiff1+" month, and ":mdiff1+" months, and "));
temp += (dayst==0?"no days":(dayst==1 ? " 1 day." : dayst + " days." ));
return temp;
}
</script>
• copy and paste this code into the BODY of your HTML document :

<SCRIPT LANGUAGE="JavaScript">
document.write("This website has been up for ");
document.write("<font color=red>");
document.write(HowLongSince(16,12,97));
document.write("</font>");
</script>
• random taglines : copy and paste this code into the HEAD of your HTML document :

<SCRIPT LANGUAGE="JavaScript">
var numb = 11
title_text = new Array();
title_text[0] = "Line One";
title_text[1] = "Line Two";
title_text[2] = "Line Three";
title_text[3] = "Line Four";
title_text[4] = "Line Five";
title_text[5] = "Line Six";
title_text[6] = "Line Seven";
title_text[7] = "Line Eight";
title_text[8] = "Line Nine";
title_text[9] = "Line Ten";
title_text[10] = "Line Eleven";
title_text[11] = "Line Twelve";
var doit = title_text[Math.round(Math.random()*numb)];
document.write("<title>:[ JavaScript Source ]: - "+doit+"</title>");
</script>
• preload page displays a loading message as the page, including images and sound elements, are loaded in the background. When the page finishes loading the screen is shown, similar to how Macromedia's Flash plugin works
• copy and paste this code into the HEAD of your HTML document :

<SCRIPT LANGUAGE="JavaScript">
function loadImages() {
if (document.getElementById) {  // DOM3 = IE5, NS6
document.getElementById('hidepage').style.visibility = 'hidden';
}
else {
if (document.layers) {  // Netscape 4
document.hidepage.visibility = 'hidden';
}
else {  // IE 4
document.all.hidepage.style.visibility = 'hidden';
      }
   }
}
</script>
• copy and paste the onLoad event handler into your BODY tag  -->

<BODY OnLoad="loadImages()">
• copy this code into the BODY of your HTML document  -->

<div id="hidepage" style="position: absolute; left:5px; top:5px; background-color: #FFFFCC; layer-background-color: #FFFFCC; height: 100%; width: 100%;">
<table width=100%><tr><td>Page loading ... Please wait.</td></tr></table></div>
<!-- put the rest of your page contents here -->
• logo fixed on bottom right corner when scrolling
• copy this code into the HEAD of your HTML document :

<SCRIPT LANGUAGE="JavaScript">
function setVariables() {
imgwidth=235;  // logo width, in pixels
imgheight=19;  // logo height, in pixels
if (navigator.appName == "Netscape") {
horz=".left";
vert=".top";
docStyle="document.";
styleDoc="";
innerW="window.innerWidth";
innerH="window.innerHeight";
offsetX="window.pageXOffset";
offsetY="window.pageYOffset";
}
else {
horz=".pixelLeft";
vert=".pixelTop";
docStyle="";
styleDoc=".style";
innerW="document.body.clientWidth";
innerH="document.body.clientHeight";
offsetX="document.body.scrollLeft";
offsetY="document.body.scrollTop";
   }
}
function checkLocation() {
objectXY="branding";
var availableX=eval(innerW);
var availableY=eval(innerH);
var currentX=eval(offsetX);
var currentY=eval(offsetY);
x=availableX-(imgwidth+30)+currentX;
y=availableY-(imgheight+20)+currentY;
evalMove();
setTimeout("checkLocation()",10);
}
function evalMove() {
eval(docStyle + objectXY + styleDoc + horz + "=" + x);
eval(docStyle + objectXY + styleDoc + vert + "=" + y);
}
</SCRIPT>
• copy this onLoad event handler into the BODY tag    -->

<BODY onload="setVariables(); checkLocation();">
• copy this code into the BODY of your HTML document  -->

<div id="branding" style="position:absolute; visibility:show; left:235px; top:-50px; z-index:2">
<table width=10 bgcolor=#ffffff><td>
<a href="http://www.yoursite.com" onmouseover="window.status='Thanks for visiting!';return true" onmouseout="window.status='';return true"><center><img src="your-logo.gif" width="235" height="19" border="0"></center></a></font></td>
</table>
</div>
• logo (or text) in the bottom right corner of the browser window as they scroll the page up and down. The logo glides very smoothly when the page is scrolled and looks great. When their cursor is on the logo, a menu appears in its place offering links to different sections of the site. The menu returns to the logo a few seconds after the move the cursor off the menu
• copy and paste this code into the HEAD of your HTML document  -->

<SCRIPT LANGUAGE="JavaScript">
function setVariables() {
if (navigator.appName == "Netscape") {
v = ".top=";
h = ".left=";
dS = "document.";
sD = "";
y = "window.pageYOffset";
x = "window.pageXOffset";
iW = "window.innerWidth";
iH = "window.innerHeight";
}
else {
h = ".pixelLeft=";
v = ".pixelTop=";
dS = "";
sD = ".style";
y = "document.body.scrollTop";
x = "document.body.scrollLeft";
iW = "document.body.clientWidth";
iH = "document.body.clientHeight";
}
xyz = 500;
innerX = eval(iW) - 115;
innerY = eval(iH) - 110;
object = "logo";
checkLocationA();
}
movex = 0;
movey = 0;
xdiff = 0;
ydiff = 0;
ystart = 0;
xstart = 0;
function checkLocation() {
yy = eval(y);
xx = eval(x);
ydiff = ystart - yy;
xdiff = xstart - xx;
if ((ydiff < (-1)) || (ydiff > (1))) movey = Math.round(ydiff / 10), ystart -= movey;
if ((xdiff < (-1)) || (xdiff > (1))) movex = Math.round(xdiff / 10), xstart -= movex;
eval(dS + object + sD + v + (ystart + innerY));
eval(dS + object + sD + h + (xstart + innerX));
setTimeout("checkLocation()", 10);
}
function checkLocationA() {
ystart = eval(y);
xstart=eval(x);
}
function switchLogo(abc) {
if (abc == "menu") {
eval(dS + object + sD + v + 0);
eval(dS + object + sD + h + (-200));
object = abc;
}
else xyz = setTimeout("delayLogo()", 2000)
}
function delayLogo() {
eval(dS + object + sD + v + 0);
eval(dS + object + sD + h + (-200));
object = 'logo';
}
</script>
• copy the onLoad event handler into your BODY tag  -->

<BODY OnLoad="setVariables();checkLocation()">
• copy this code into the BODY of your HTML document  -->

<div id="logo" style="position:absolute; visibility:show; left:0px; top:-200px; z-index:2">
<table border=0 cellspacing=10 cellpadding=0 width=100>
<tr>
<td>
<center><br><br><br>
<A href="javascript:void(0)"; onmouseover="switchLogo('menu')">
Logo
</A>
</center>
</td>
</tr>
</table>
</div>
<div id="menu" style="position:absolute; visibility:show; left:0px; top:-200px; z-index:2">
<table border=0 cellspacing=10 cellpadding=0 width=100>
<tr>
<td>
<center>
<a href="http://www.your-web-site-address-here.com/page-one.html"; onmouseover="clearTimeout(xyz)"; onmouseout="switchLogo('logo')">Page One</a>
</center>
</td>
</tr>
<tr>
<td>
<center>
<a href="http://www.your-web-site-address-here.com/page-two.html"; onmouseover="clearTimeout(xyz)"; onmouseout="switchLogo('logo')">Page Two</a>
</center>
</td>
</tr>
<tr>
<td>
<center>
<a href="http://www.your-web-site-address-here.com/page-three.html"; onmouseover="clearTimeout(xyz)"; onmouseout="switchLogo('logo')">Page Three</a>
</center>
</td>
</tr>
</table>
</div>
<p><center>
• write page title : copy the following between the <BODY> and </BODY> tags :

<SCRIPT LANGUAGE="JavaScript">
document.write(document.title);
</SCRIPT>
• send a link to the visited webpage to a friend via Outlook : copy and paste this code into the BODY of your HTML document :

<div align="center">
<font face="Verdana" color="#0000FF">
<SCRIPT LANGUAGE="JavaScript">
function isPPC() {
if (navigator.appVersion.indexOf("PPC") != -1) return true;
else return false;
}
if(isPPC()) {
document.write('<b>Send <A CLASS="contact" HREF=\"mailto:\?subject\=Take a look at this page I found, ' + document.title + '?body=You can see this page at: ' + window.location + '\" onMouseOver="window.status=\'Send your friends e-mail about this page\'; return true" TITLE="Send your friends e-mail about this page">this page<\/A> to a friend</b>');
}
else { document.write('<b>Send <A CLASS="contact" HREF=\"mailto:\?body\=Take a look at this page I found, ' + document.title + '. You can see this page at: ' + window.location + '\" onMouseOver="window.status=\'Send your friends e-mail about this page\'; return true" TITLE="Send your friends e-mail about this page">this page<\/A> to a friend</b>');
}
</script>
</font>
</div>
• floating email-this-link with auto-capture of page URL : copy and paste into the body

<script>
var hX = 340;
var vY = -140;
</script>
<div id="FloatMail" style="position: absolute;
background-color: #000000;
background-image:url('float_dots.gif');
width: 180px;
border-width: 2;
border-style:outset;
border-color:#444444;
padding:5px">
<center>
<form name="eMailer">
<font size="2" face="Verdana,Arial" color="#ff0056">
E-Mail This Link
<br>
Enter recipient's e-mail:
</font>
<br>
<input type="text" name="address" size="20"
style="background-color:#000000;
       color:#05fa9e;
       border-color:#ff0000;
       border-width:1;
       border-style:dashed;
       margin-top:7px;"><br>
<input type="button" value="Send this URL" onClick="mailThisUrl();"
style="color:#ff0057;
       font-family:Arial;
       font-size:10pt;
       background-color:#000000;
       border-width:1;
       border-style:solid;
       border-color:#242424;
       margin-top:7px;">
</form>
</center>
</div>
<script>
var good;function checkEmailAddress(field){
var goodEmail=field.value.match(/\b(^(\S+@).+((\.com)|(\.net)|(\.edu)|(\.mil)|(\.gov)|(\.org)|(\..{2,2}))$)\b/gi);
if (goodEmail){good = true}else{alert('Please enter a valid e-mail address.');
field.focus();field.select();good=false;}}
u=window.location;m="I thought this might interest you...";
function mailThisUrl(){good=false;
checkEmailAddress(document.eMailer.address);
if (good){window.location="mailto:"+document.eMailer.address.value+"?subject="+m+"&body="+document.title+" "+u;}}
var nn=(navigator.appName.indexOf("Netscape")!=-1);
var dD=document,dH=dD.html,dB=dD.body,px=dD.layers?'':'px';
function floatMail(iX,iY,id){
var L=dD.getElementById?dD.getElementById(id):dD.all?dD.all[id]:dD.layers[id];
this[id+'O']=L;if(dD.layers)L.style=L;L.nX=L.iX=iX;L.nY=L.iY=iY;
L.P=function(x,y){this.style.left=x+px;this.style.top=y+px;};L.Fm=function(){var pX, pY;
pX=(this.iX >=0)?0:nn?innerWidth:nn&&dH.clientWidth?dH.clientWidth:dB.clientWidth;
pY=nn?pageYOffset:nn&&dH.scrollTop?dH.scrollTop:dB.scrollTop;
if(this.iY<0)pY+=nn?innerHeight:nn&&dH.clientHeight?dH.clientHeight:dB.clientHeight;
this.nX+=.1*(pX+this.iX-this.nX);this.nY+=.1*(pY+this.iY-this.nY);this.P(this.nX,this.nY);
setTimeout(this.id+'O.Fm()',33);};
return L;}
floatMail(hX,vY,'FloatMail').Fm();
</script>
• send a link to the visited webpage to a friend via Freedback.com
• copy and paste this code into the HEAD of your HTML document :

<SCRIPT LANGUAGE="JavaScript">
function initMail(form) {
text = "Check out this page:  " + window.location;
form.message.value = "Hi " + form.sendto.value + " (" + form.to.value + "):\n\n"
 + text + "\n\nYour Friend,\n" + form.sendername.value + "(" + form.senderemail.value + ")";
return (form.to.value != "");
}
</script>
• copy and paste this code into the BODY of your HTML document  -->

<center>
<form name=emailform method=post action="http://cgi.freedback.com/mail.pl" target="_new" onSubmit="return initMail(this);">
<input type=hidden name=subject value="** Check Out This Site! **">
<input type=hidden name=message value="">
<table>
<tr><td colspan=2 align=center>Tell a friend about this page!</td></tr>
<tr><td>Their Name:</td><td><input type=text name=sendto></td></tr>
<tr><td>Their Email:</td><td><input type=text name=to></td></tr>
<tr><td>Your Name:</td><td><input type=text name=sendername></td></tr>
<tr><td>Your Email:</td><td><input type=text name=senderemail></td></tr>
<tr><td colspan=2 align=center><input type=submit value="Ok!"></td></tr>
</table>
</form>
</center>
• formatting background, font, and sticky selection in dropdown menus
• copy and paste into the head

<style>
select.Menu{
  font-family: Verdana,sans serif;
  font-size:   14pt;
  font-weight: bold;
  font-style:  normal;
}
option.MenuColorOne{
  color:#FFFFFF;
  background-color:#FF0000;
}
option.MenuColorTwo{
  color:#FFFF00;
  background-color:#0000FF;
}
option.MenuColorThree{
  color:#123456;
  background-color:#FEDCBA;
}
</style>
• copy and paste into the body

<form>
<select class="Menu" size="1">
<option class="MenuColorOne">Item One</option>
<option class="MenuColorOne">Item Two</option>
<option class="MenuColorOne">Item Three</option>
<option class="MenuColorTwo">Item Four</option>
<option class="MenuColorTwo">Item Five</option>
<option class="MenuColorTwo">Item Six</option>
<option class="MenuColorThree">Item Seven</option>
<option class="MenuColorThree">Item Eight</option>
<option class="MenuColorThree">Item Nine</option>
</select>
</form>
<select class="Menu" size="1" onClick="javascript:self.focus()">
• show time spent on webpage :
• copy and paste this code into the HEAD of your HTML document  -->

<SCRIPT LANGUAGE="JavaScript">
startday = new Date();
clockStart = startday.getTime();
function initStopwatch() {
var myTime = new Date();
return((myTime.getTime() - clockStart)/1000);
}
function getSecs() {
var tSecs = Math.round(initStopwatch());
var iSecs = tSecs % 60;
var iMins = Math.round((tSecs-30)/60);
var sSecs ="" + ((iSecs > 9) ? iSecs : "0" + iSecs);
var sMins ="" + ((iMins > 9) ? iMins : "0" + iMins);
document.forms[0].timespent.value = sMins+":"+sSecs;
window.setTimeout('getSecs()',1000);
}
</script>
• add this onLoad event handler into the BODY tag :

<BODY onLoad="window.setTimeout('getSecs()',1)">
• copy and paste this code into the BODY of your HTML document :

<CENTER>
<FORM>
<input size=5 name=timespent>
</FORM>
</CENTER>
• menus :
• pull down menu generator
• cascading menu :
• OpenCube : DHTML menus (easy to create and put at the top of a scrollbar-less wepage while using a lower iFrame for navigation)
• copy the following between the <HEAD> and </HEAD> tags :

<SCRIPT LANGUAGE="JavaScript">
var isDOM = (document.getElementById ? true : false);
var isIE4 = ((document.all && !isDOM) ? true : false);
var isNS4 = (document.layers ? true : false);
function getRef(id) {
if (isDOM) return document.getElementById(id);
if (isIE4) return document.all[id];
if (isNS4) return document.layers[id];
}
function getSty(id) {
return (isNS4 ? getRef(id) : getRef(id).style);
}
var popTimer = 0;
var litNow = new Array();
function popOver(menuNum, itemNum) {
clearTimeout(popTimer);
hideAllBut(menuNum);
litNow = getTree(menuNum, itemNum);
changeCol(litNow, true);
targetNum = menu[menuNum][itemNum].target;
if (targetNum > 0) {
thisX = parseInt(menu[menuNum][0].ref.left) + parseInt(menu[menuNum][itemNum].ref.left);
thisY = parseInt(menu[menuNum][0].ref.top) + parseInt(menu[menuNum][itemNum].ref.top);
with (menu[targetNum][0].ref) {
left = parseInt(thisX + menu[targetNum][0].x);
top = parseInt(thisY + menu[targetNum][0].y);
visibility = 'visible';
      }
   }
}
function popOut(menuNum, itemNum) {
if ((menuNum == 0) && !menu[menuNum][itemNum].target)
hideAllBut(0)
else
popTimer = setTimeout('hideAllBut(0)', 500);
}
function getTree(menuNum, itemNum) {
itemArray = new Array(menu.length);
while(1) {
itemArray[menuNum] = itemNum;
// If we've reached the top of the hierarchy, return.
if (menuNum == 0) return itemArray;
itemNum = menu[menuNum][0].parentItem;
menuNum = menu[menuNum][0].parentMenu;
   }
}
function changeCol(changeArray, isOver) {
for (menuCount = 0; menuCount < changeArray.length; menuCount++) {
if (changeArray[menuCount]) {
newCol = isOver ? menu[menuCount][0].overCol : menu[menuCount][0].backCol;
with (menu[menuCount][changeArray[menuCount]].ref) {
if (isNS4) bgColor = newCol;
else backgroundColor = newCol;
         }
      }
   }
}
function hideAllBut(menuNum) {
var keepMenus = getTree(menuNum, 1);
for (count = 0; count < menu.length; count++)
if (!keepMenus[count])
menu[count][0].ref.visibility = 'hidden';
changeCol(litNow, false);
}
function Menu(isVert, popInd, x, y, width, overCol, backCol, borderClass, textClass) {
this.isVert = isVert;
this.popInd = popInd
this.x = x;
this.y = y;
this.width = width;
this.overCol = overCol;
this.backCol = backCol;
this.borderClass = borderClass;
this.textClass = textClass;
this.parentMenu = null;
this.parentItem = null;
this.ref = null;
}
function Item(text, href, frame, length, spacing, target) {
this.text = text;
this.href = href;
this.frame = frame;
this.length = length;
this.spacing = spacing;
this.target = target;
this.ref = null;
}
function writeMenus() {
if (!isDOM && !isIE4 && !isNS4) return;
for (currMenu = 0; currMenu < menu.length; currMenu++) with (menu[currMenu][0]) {
var str = '', itemX = 0, itemY = 0;
for (currItem = 1; currItem < menu[currMenu].length; currItem++) with (menu[currMenu]
[currItem]) {
var itemID = 'menu' + currMenu + 'item' + currItem;
var w = (isVert ? width : length);
var h = (isVert ? length : width);
if (isDOM || isIE4) {
str += '<div id="' + itemID + '" style="position: absolute; left: ' + itemX + '; top: ' +
itemY + '; width: ' + w + '; height: ' + h + '; visibility: inherit; ';
if (backCol) str += 'background: ' + backCol + '; ';
str += '" ';
}
if (isNS4) {
str += '<layer id="' + itemID + '" left="' + itemX + '" top="' + itemY + '" width="' +  w
+ '" height="' + h + '" visibility="inherit" ';
if (backCol) str += 'bgcolor="' + backCol + '" ';
}
if (borderClass) str += 'class="' + borderClass + '" ';
str += 'onMouseOver="popOver(' + currMenu + ',' + currItem + ')" onMouseOut="popOut(' +
currMenu + ',' + currItem + ')">';
str += '<table width="' + (w - 8) + '" border="0" cellspacing="0" cellpadding="' + (!isNS4
&& borderClass ? 3 : 0) + '"><tr><td align="left" height="' + (h - 7) + '">' + '<a
class="' + textClass + '" href="' + href + '"' + (frame ? ' target="' + frame + '">' :
'>') + text + '</a></td>';
if (target > 0) {
menu[target][0].parentMenu = currMenu;
menu[target][0].parentItem = currItem;
if (popInd) str += '<td class="' + textClass + '" align="right">' + popInd + '</td>';
}
str += '</tr></table>' + (isNS4 ? '</layer>' : '</div>');
if (isVert) itemY += length + spacing;
else itemX += length + spacing;
}
if (isDOM) {
var newDiv = document.createElement('div');
document.getElementsByTagName('body').item(0).appendChild(newDiv);
newDiv.innerHTML = str;
ref = newDiv.style;
ref.position = 'absolute';
ref.visibility = 'hidden';
}
if (isIE4) {
document.body.insertAdjacentHTML('beforeEnd', '<div id="menu' + currMenu + 'div" ' +
'style="position: absolute; visibility: hidden">' + str + '</div>');
ref = getSty('menu' + currMenu + 'div');
}
if (isNS4) {
ref = new Layer(0);
ref.document.write(str);
ref.document.close();
}
for (currItem = 1; currItem < menu[currMenu].length; currItem++) {
itemName = 'menu' + currMenu + 'item' + currItem;
if (isDOM || isIE4) menu[currMenu][currItem].ref = getSty(itemName);
if (isNS4) menu[currMenu][currItem].ref = ref.document[itemName];
   }
}
with(menu[0][0]) {
ref.left = x;
ref.top = y;
ref.visibility = 'visible';
   }
}
var menu = new Array();
var defOver = '#336699', defBack = '#003366';
var defLength = 22;
menu[0] = new Array();
menu[0][0] = new Menu(false, '', 5, 0, 17, '#669999', '#006666', '', 'itemText');
menu[0][1] = new Item('  File', '#', '', 40, 10, 1);
menu[0][2] = new Item('  Edit', '#', '', 40, 10, 2);
menu[0][3] = new Item('  Help', '#', '', 40, 10, 3);
menu[0][4] = new Item('  Site', 'http://gusnz.cjb.net', '_new', 40, 10, 0);
menu[1] = new Array();
menu[1][0] = new Menu(true, '>', 0, 22, 80, defOver, defBack, 'itemBorder', 'itemText');
menu[1][1] = new Item('Open', '#', '', defLength, 0, 0);
menu[1][2] = new Item('Save', '#', '', defLength, 0, 0);
menu[1][3] = new Item('Reopen', '#', '', defLength, 0, 4);
menu[1][4] = new Item('Exit', '#', '', defLength, 0, 0);
menu[2] = new Array();
menu[2][0] = new Menu(true, '>', 0, 22, 80, defOver, defBack, 'itemBorder', 'itemText');
menu[2][1] = new Item('Cut', '#', '', defLength, 0, 0);
menu[2][2] = new Item('Copy', '#', '', defLength, 0, 0);
menu[2][3] = new Item('Paste', '#', '', defLength, 0, 0);
menu[3] = new Array();
menu[3][0] = new Menu(true, '<', 0, 22, 80, defOver, defBack, 'itemBorder', 'itemText');
menu[3][1] = new Item('Contents', '#', '', defLength, 0, 0);
menu[3][2] = new Item('Index', '#', '', defLength, 0, 0);
menu[3][3] = new Item('About', '#', '', defLength, 0, 5);
menu[4] = new Array();
menu[4][0] = new Menu(true, '>', 85, 0, 120, '#333366', '#666699', 'crazyBorder',
'crazyText');
menu[4][1] = new Item('Recent Doc 1:<br>Schedule', '#', '', 36, 4, 0);
menu[4][2] = new Item('Recent Doc 2:<br>Plan', '#', '', 36, 7, 0);
menu[4][3] = new Item('Etc. etc...', '#', '', defLength, 0, 0);
menu[5] = new Array();
menu[5][0] = new Menu(true, '>', -85, -17, 80, defOver, defBack, 'itemBorder',
'itemText');
menu[5][1] = new Item('Leftwards!<br>And up!', '#', '', 40, 0, 0);
var popOldWidth = window.innerWidth;
nsResizeHandler = new Function('if (popOldWidth != window.innerWidth) location.reload()');
if (isNS4) document.captureEvents(Event.CLICK);
document.onclick = clickHandle;
function clickHandle(evt)
{
 if (isNS4) document.routeEvent(evt);
 hideAllBut(0);
}
function moveRoot()
{
 with(menu[0][0].ref) left = ((parseInt(left) < 100) ? 100 : 5);
}
</script>
<style>
.itemBorder { border: 1px solid black }
.itemText { text-decoration: none; color: #FFFFFF; font: 12px Arial, Helvetica }
.crazyBorder { border: 2px outset #663399 }
.crazyText { text-decoration: none; color: #FFCC99; font: Bold 12px Arial, Helvetica }
</style>
• insert the onLoad event handler into your BODY tag :

<BODY marginwidth="0" marginheight="0" style="margin: 0" onLoad="writeMenus()" onResize="if (isNS4) nsResizeHandler()">
• copy this code into the BODY of your HTML document :

<table bgcolor="#006666" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td height="17"><font size="1"> </font></td></tr></table>
• category menu in left frame
• save this FRAMESET code and modify it for your page :

<frameset cols="175,*">
    <frame src="category-menus.html" name="left">
    <frame src="home-page.html" name="right">
</frameset>
</html>
• create a new document, save it as category-menus.html :
• paste this code into the HEAD of category-menus.html :

<style type="text/css">
a
{text-decoration: none;}
.title
{position: absolute;
width: 100px;
height: 20px;
left: 10px;
z-index: 10;
font-family: verdana, helvetica, sans-serif;
font-weight: bold;
font-size: 12px;}
.submenu
{position: absolute;
left: 25px;
width: 120px;
border: 1px solid black;
background-color: yellow;
layer-background-color: yellow;
font-family: verdana, helvetica, sans-serif;
font-size: 10px;
visibility: hidden;}
</style>
<SCRIPT LANGUAGE="JavaScript">
var nom = 4; // Number of menus
var usePictures = 1; // use pictures?  1 = yes, 0 = no
var ttls = new Array(); // An array for the title objects
var subs = new Array(); // An array for the submenu objects
var lastn;
var lastmove;
if (document.layers) {
visible = 'show';
hidden = 'hide';
}
else
if (document.all) {
visible = 'visible';
hidden = 'hidden';
}
for (var i = 1; i <= nom; i++) {
ttls[i] = ('title' + i);
subs[i] = ('submenu' +i);
}
function picopen(n) {
title = ('title' + n);
pic = ('pic' + n);
if (document.layers) {
document.layers[title].document.images[pic].src = "opened.gif";
}
else if (document.all) {
document.all(pic).src = "opened.gif";
   }
}
function picclose(n) {
title = ('title' + n);
pic = ('pic' + n);
if (document.layers) {
document.layers[title].document.images[pic].src = "closed.gif";
}
else if (document.all) {
document.all(pic).src = "closed.gif";
   }
}
lastn = (nom + 1);
lastmove = 0;
function lasttoggle(n,move) {
if (n <= nom) {
menu = ('submenu' + n);
if (document.layers) {
submenu = document.layers[menu];
}
else if (document.all) {
submenu = document.all(menu).style;
}
if (submenu.visibility == visible) {
submenu.visibility = hidden;
picclose(n); // Remove this if you don't use pictures
for (var i = (n+1); i <= nom; i++) {
if (document.layers) {
document.layers[ttls[i]].top -= move;
document.layers[subs[i]].top -= move;
}
else if (document.all) {
document.all(ttls[i]).style.pixelTop -= move;
document.all(subs[i]).style.pixelTop -= move;
            }
         }
      }
   }
}
function toggle(n,move) {
menu = ('submenu' + n);
if (document.layers) {
submenu = document.layers[menu];
}
else if (document.all) {
submenu = document.all(menu).style;
}
if (submenu.visibility == visible) {
submenu.visibility = hidden;
if (usePictures) picclose(n);
for (var i = (n+1); i <= nom; i++) {
if (document.layers) {
document.layers[ttls[i]].top -= move;
document.layers[subs[i]].top -= move;
}
else if (document.all) {
document.all(ttls[i]).style.pixelTop -= move;
document.all(subs[i]).style.pixelTop -= move;
      }
   }
}
else {
submenu.visibility = visible;
if (usePictures) picopen(n);
if (lastn != n) {
lasttoggle(lastn,lastmove);
}
for (var i = (n+1); i <= nom; i++) {
if (document.layers) {
document.layers[ttls[i]].top += move;
document.layers[subs[i]].top += move;
}
if (document.all) {
document.all(ttls[i]).style.pixelTop += move;
document.all(subs[i]).style.pixelTop += move;
      }
   }
}
lastn = n;
lastmove = move;
}
</script>
• copy and paste this code into the BODY of category-menus.html :

<div class="title" id="title1" style="top: 0px">
<a href="#" onclick="javascript: toggle(1,30); return false"><img name="pic1" src="http://javascript.internet.com/img/category-menus/closed.gif" border="0">Category 1</a>
</div>
<div class="submenu" id="submenu1" style="top: 20px">
 <a href="page01.html" target="right">Item # 1</a><br>
 <a href="page02.html" target="right">Item # 2</a>
</div>
<div class="title" id="title2" style="top: 20px">
<a href="#" onclick="javascript: toggle(2,60); return false"><img name="pic2" src="http://javascript.internet.com/img/category-menus/closed.gif" border="0">Category 2</a>
</div>
<div class="submenu" id="submenu2" style="top: 40px">
 <a href="page03.html" target="right">Item # 3</a><br>
 <a href="page04.html" target="right">Item # 4</a><br>
 <a href="page05.html" target="right">Item # 5</a><br>
 <a href="page06.html" target="right">Item # 6</a>
</div>
<div class="title" id="title3" style="top: 40px">
<a href="#" onclick="javascript: toggle(3,45); return false"><img name="pic3" src="http://javascript.internet.com/img/category-menus/closed.gif" border="0">Category 3</a>
</div>
<div class="submenu" id="submenu3" style="top: 60px">
 <a href="page07.html" target="right">Item # 7</a><br>
 <a href="page08.html" target="right">Item # 8</a><br>
 <a href="page09.html" target="right">Item # 9</a>
</div>
<div class="title" id="title4" style="top: 60px">
<a href="#" onclick="javascript: toggle(4,60); return false"><img name="pic4" src="http://javascript.internet.com/img/category-menus/closed.gif" border="0">Category 4</a>
</div>
<div class="submenu" id="submenu4" style="top: 80px">
 <a href="page10.html" target="right">Item # 10</a><br>
 <a href="page11.html" target="right">Item # 11</a><br>
 <a href="page12.html" target="right">Item # 12</a><br>
 <a href="page13.html" target="right">Item # 13</a>
</div>
• be sure to save the arrow images (opened.gif and closed.gif) to your site :
• color chart : 8 tables with the 512 "standard" colors and their corresponding "#RRGGBB" values written in. Copy the following between the <BODY> and </BODY> tags :

<center>
<SCRIPT LANGUAGE="JavaScript">
clr=new Array('00','20','40','60','80','a0','c0','ff');
for (i=0;i<8;i++) {
document.write("<table border=1 cellpadding=8>");
for (j=0;j<8;j++) {
document.write("<tr>");
for (k=0;k<8;k++) {
document.write('<td bgcolor="#'+clr[i]+clr[j]+clr[k]+'">');
document.write('<tt><font color="#'+clr[7-i]+clr[7-j]+clr[7-k]+'"> ');
document.write(clr[i]+clr[j]+clr[k]+' </font></tt></td>'); }
document.write("</tr>"); }
document.write("</table><br>"); }
</script>

• ensures that the page is fully loaded before the animated GIF begins
• frame reloading and content protector : if your content page is loaded directly (not in frames) the page is reloaded in your frames. And to the aid of webmasters everywhere, this script also foils other sites loading your content page in their frames. Visitors are notified of the bandwidth theft then are sent to the page on your site (if used with our Dynamic Frameset script) or back to your main page. Copy the following between the <HEAD> and </HEAD> tags :

<SCRIPT LANGUAGE="JavaScript">
ok_urls = new Array();
ok_urls[1] = "http://your-web-site-address-here.com/frameset.html";
ok_urls[2] = "http://www.your-web-site-address-here.com/frameset.html";
function reportError(msg, url, line) {
if (url == window.location.href) {
msg = "\nBandwidth Theft Alert!\n\n" +
"This site is illegally stealing bandwidth\n" +
"from our site, WWW.OUR-SITE.COM.\n\n" +
"We will now load the content page\n" +
"from our server so you may view it.\n\n" +
"Thanks for your patience!";
alert(msg);
top.location.href = ok_urls[1] + "?" + window.location.href;
return true;
   }
}
window.onerror = reportError;
url_found = 0;
for (var i = 1; i <= ok_urls.length && !url_found; i++) {
url_found = (parent.location.href.indexOf(ok_urls[i]) == -1);
}
if (!url_found || (window == top))
top.location.href = ok_urls[1] + "?" + window.location.href;
</script>
• gradual theatral opening
• copy and paste the coding into a text file and name it "reveal.js" :

var width=document.body.clientWidth;
var height=document.body.clientHeight;
function doClickText(who,type,step,timeOut) {
 document.getElementById(who).style.display="none";
 if(type==0) {
  reveal('revealDiv1',step,timeOut,0);
  reveal('revealDiv2',step,timeOut,1);
 }
 if(type==1) {
  reveal('revealDiv1',step,timeOut,2);
  reveal('revealDiv2',step,timeOut,3);
 }
}
function reveal(who,step,timeOut,type) {
 if(type==0)
  var where="top";
 if(type==1)
  var where="bottom";
 if(type==2)
  var where="left";
 if(type==3)
  var where="right";
 eval('var temp=document.getElementById(who).style.'+where);
 temp=parseInt(temp);
 if(type==0||type==1)
  var checkWith=height/2;
 if(type==2||type==3)
  var checkWith=width/2;
 if(-temp<checkWith) {
  temp-=step;
  eval('document.getElementById(who).style.'+where+'=temp;');
  setTimeout("reveal('"+who+"',"+step+",'"+timeOut+"',"+type+")", timeOut);
 }
 else {
  document.getElementById(who).style.display="none";
  document.body.scroll="yes";
 }
}

/*
Following function is required to initialise Reveal
The function is called in the following manner :
 initReveal(type,div1bg,div2bg,div1bw,div2bw,div1bc,div2bc,step,timeOut,click)
 Parameter description :
 type -> 0 for vertical | 1 for horizantal
 div1bg -> Background color of first layer  (eg. '#CCCCCC')
 div2bg -> Background color of second layer (eg. '#CCCCCC')
 div1bw -> Border width of first layer  (eg. 1)
 div2bw -> Border width of second layer  (eg. 1)
 div1bc -> Border color of first layer  (eg. '#000000')
 div2bc -> Border color of second layer  (eg. '#000000')
 step -> The amount revealed every interval (eg. 5)
 timeOut -> The delay in milliseconds
 click -> true if user has to click to reveal | false for auto reveal
function initReveal(type,div1bg,div2bg,div1bw,div2bw,div1bc,div2bc,step,timeOut,click) {
 if(type==0) {
  var bWhere1="border-bottom";
  var bWhere2="border-top";
  var putZero1="top:0px; left:0px";
  var putZero2="bottom:0px; left:0px";
  document.write('<div id="revealDiv1" style="z-index:100; display:block; position:absolute; '+putZero1+'; background:'+div1bg+' ; width:'+(width)+'; height:'+(height/2)+'; '+bWhere1+':'+div1bc+' solid '+div1bw+'px"></div>');
  document.write('<div id="revealDiv2" style="z-index:100; display:block; position:absolute; '+putZero2+'; background:'+div2bg+' ; width:'+(width)+'; height:'+(height/2)+'; '+bWhere2+':'+div2bc+' solid '+div2bw+'px"></div>');
  if(!click) {
   reveal('revealDiv1',step,timeOut,0);
   reveal('revealDiv2',step,timeOut,1);
  }
  else {
   clickText(type,step,timeOut);
  }
 }
 if(type==1) {
  var bWhere1="border-right";
  var bWhere2="border-left";
  var putZero1="top:0px; left:0px";
  var putZero2="top:0px; right:0px";
  document.write('<div id="revealDiv1" style="z-index:100; display:block; position:absolute; '+putZero1+'; background:'+div1bg+' ; width:'+(width/2)+'; height:'+(height)+'; '+bWhere1+':'+div1bc+' solid '+div1bw+'px"></div>');
  document.write('<div id="revealDiv2" style="z-index:100; display:block; position:absolute; '+putZero2+'; background:'+div2bg+' ; width:'+(width/2)+'; height:'+(height)+'; '+bWhere2+':'+div2bc+' solid '+div2bw+'px"></div>');
  if(!click) {
   reveal('revealDiv1',step,timeOut,2);
   reveal('revealDiv2',step,timeOut,3);
  }
  else {
   clickText(type,step,timeOut);
  }
 }
 function clickText(type,step,timeOut) {
  document.write('<div id="clickText" style="z-index:101; display:block; position:absolute; top:'+(height/2-clickh/2-clickb)+'; left:'+(width/2-clickw/2-clickb)+'"><table style="border:'+clickc+' solid '+clickb+'px; background:'+clickbg+' ;width:'+clickw+'px; height:'+clickh+'; '+clickFont+'; cursor:hand; cursor:pointer" onClick="doClickText(\'clickText\','+type+','+step+','+timeOut+')"><tr><td align="middle">'+clickt+'</td></tr></table></div>');
 }
}

• insert the scroll event handler into your BODY tag  -->

<BODY scroll="no">
• copy and paste this code into the BODY of your HTML document  -->

<script language="JavaScript" src="reveal.js"></script>
<script language="JavaScript">
var clickw=150;  // Width
var clickh=20;  // Height
var clickb=2;  // Border width
var clickc="#000098"; // Border color
var clickbg="#000098"; // Background color
var clickt="Click Here to Reveal the Page!"; // Text to display
var clickFont="font-family:verdana,arial,helvetica; font-size:10pt; font-weight:bold; color:#FFFFFF";  // The font style of the text
 initReveal(type,div1bg,div2bg,div1bw,div2bw,div1bc,div2bc,step,timeOut,click)
 Parameter description :
 type -> 0 for vertical | 1 for horizantal
 div1bg -> Background color of first layer  (eg. '#CCCCCC')
 div2bg -> Background color of second layer (eg. '#CCCCCC')
 div1bw -> Border width of first layer  (eg. 1)
 div2bw -> Border width of second layer  (eg. 1)
 div1bc -> Border color of first layer  (eg. '#000000')
 div2bc -> Border color of second layer  (eg. '#000000')
 step -> The amount revealed every interval (eg. 5)
 timeOut -> The delay in milliseconds
 click -> true if user has to click to reveal | false for auto reveal
 See below for an example of how to call the function.
*/
new initReveal(0,'#BFCEFF','#BFCEFF',1,1,'#000000','#000000',3,10,true);
</script>
• resizeable viewer
• copy and paste this first code into a new file and save it as resizableViewer.js :

arImageSrc = new Array ("loading.gif","loaded.gif");
arImageList = new Array ();
for (counter in arImageSrc) {
arImageList[counter] = new Image();
arImageList[counter].src = arImageSrc[counter];
}
var height = screen.height;
var width = screen.width;
var leftpos = width / 2 - 50;
var toppos = height / 2 - 50;
function encode(str){ // Netscape fix thanks to Cyanide_7
return escape(str.replace(/ /g,'+'));
}
function view(what) {
var url = 'viewer.html?pic='+encode(what);
window.open(url,'WIN','scrollbars=no,status=no,toolbar=no,resizable=1,location=no,menu=no,width=100,height=100,left=' + leftpos + ',top=' + toppos);
}
function getParams() {
var idx = document.URL.indexOf('?');
var params = new Array();
if (idx != -1) {
var pairs = document.URL.substring(idx+1, document.URL.length).split('&');
for (var i=0; i<pairs.length; i++) {
nameVal = pairs[i].split('=');
params[nameVal[0]] = nameVal[1];
   }
}
return params;
}
params = getParams();
function resize() {
if (eval(pic).height) {
var name = navigator.appName
if (name == "Microsoft Internet Explorer") {
myHeight = eval(pic).height + 40;
myWidth = eval(pic).width + 12;
}
else {
myHeight = eval(pic).height + 9;
myWidth = eval(pic).width;
}
clearTimeout();
var height = screen.height;
var width = screen.width;
var leftpos = width / 2 - myWidth / 2;
var toppos = height / 2 - myHeight / 2;
self.moveTo(leftpos, toppos);
self.resizeTo(myWidth, myHeight);
document.il.src = 'loaded.gif';
}
else setTimeOut(resize(), 100);
}
• copy and paste this whole section into a new HTML document and then save it as:  viewer.html :

<html>
<head>
<script language="javascript" src="resizableViewer.js"></script>
</head>
<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" bgcolor="#FFFFFF">
<img border="0" src="loading.gif" width="100" height="9" name="il" onload="window.focus()">
<br>
<SCRIPT LANGUAGE="JavaScript">
form = unescape(params["pic"]);
pic = new Image();
pic.src=form;
document.write("<img src=" + form + " boder=1 onload=resize()>");
</script>
</body>
</html>
• save this code into the HEAD of your HTML page :

<head>
<script language="javascript" src="resizableViewer.js"></script>
</head>
• copy and paste this code into the BODY of your HTML page  -->

<center>
<a href="javascript:view('cotton.jpg')">Pic 1</a>
<a href="javascript:view('michael.jpg')">Pic 2</a>
</center>
• save the image load images to your web server

<!-- http://www.your-web-site.com/loading.gif -->
<!-- http://www.your-web-site.com/loaded.gif -->
• dynamic sized image : sometimes, your image does not look very good in different sized browser windows. This script will proportionally resize a graphic to fit within the current window or frame when a page is reloaded, thus giving a more consistent and attractive look to your page
• copy the coding into the HEAD of your HTML document

<SCRIPT LANGUAGE="JavaScript">
function showpic(src, w, h, alt, aln, pw, ph, bw, bh) {
if (src == null) return;
var iw, ih; // Set inner width and height
if (window.innerWidth == null) {
iw = document.body.clientWidth;
ih=document.body.clientHeight;
}
else {
iw = window.innerWidth;
ih = window.innerHeight;
}
if (w == null) w = iw;
if(h == null)  h = ih;
if(alt == null) alt = "Picture";
if(aln == null) aln = "left";
if(pw == null) pw = 100;
if(ph == null) ph = 100;
if(bw == null) bw = 24;
if(bh == null) bh = 24;
var sw = Math.round((iw - bw) * pw / 100);
var sh = Math.round((ih - bh) * ph / 100);
if ((w * sh) / (h * sw) < 1) sw = Math.round(w * sh / h);
else sh = Math.round(h * sw / w);
document.write('<img src="'+src+'" alt="'+alt+'" width="'+sw+'" height="'+sh+'" align="'+aln+'">');
}
</script>
• copy this code into the BODY of your HTML document :

<script language="javascript">
showpic("your-image.gif", 362, 113, "A crows of people", "middle");
</script>
• dynamic title bar changing message every 10 seconds :
• focus OnLoad : put the user's cursor inside a text box (calling giving the text box focus) as soon as the page is loaded. This helps ensure that visitors do not 'overlook' an important form item on your site.
• launches a frameless "go-behind" popup banner window that cannot be closed unless the banner ad is clicked on. The frameless banner window persists, even if the launching browser window is closed. The banner window closes once the banner is clicked.
• launch a popup window that continually re-opens itself and cannot be permanently closed unless the visitor clicks on a link that you provide. Compatible Browsers: NS6 and IE4-6.
• random banner at uploading : copy and paste the code to the BODY of your HTML document :

<SCRIPT LANGUAGE="JavaScript">
var how_many_ads = 3;
var now = new Date()
var sec = now.getSeconds()
var ad = sec % how_many_ads;
ad +=1;
if (ad==1) {
txt="The World's Largest Online Bookstore, Amazon.com";
url="http://www.amazon.com";
alt="amazon.com";
banner="http://imageserv.imgis.com/images/Ad12669St1Sz1Sq1_Ban1.gif";
width="468";
height="60";
}
if (ad==2) {
txt="Palm III by 3Com, in stock!";
url="http://cybershop.com/";
alt="cybershop.com";
banner="http://imageserv.imgis.com/images/Ad13189St1Sz1Sq5_Ban10.gif";
width="468";
height="60";
}
if (ad==3) {
txt="Find it at GoTo.com";
url="http://www.goto.com";
alt="goto.com";
banner="http://imageserv.imgis.com/images/Ad13700St1Sz1Sq1_Ban1.gif";
width="468";
height="60";
}
document.write('<center>');
document.write('<a href=\"' + url + '\" target=\"_top\">');
document.write('<img src=\"' + banner + '\" width=')
document.write(width + ' height=' + height + ' ');
document.write('alt=\"' + alt + '\" border=0><br>');
document.write('<small>' + txt + '</small></a>');
document.write('</center>');
</SCRIPT>
• rotating banner
• copy and paste this code into the HEAD of your HTML document  -->

<SCRIPT LANGUAGE="JavaScript">
var mfBanners = [
['http://www.banner1-url-here.com', 'http://imageserv.imgis.com/images/Ad13700St1Sz1Sq1_Ban1.gif'],
['http://www.banner2-url-here.com', 'http://imageserv.imgis.com/images/Ad13189St1Sz1Sq5_Ban10.gif']
];
var mfIe = false;
if( document.all) {
mfIe = true;
}
var mfBannerIndex = 0;
function mfBannerChange() {
var htmlString = '<a target="_blank" href="'+mfBanners[mfBannerIndex][0]+'"> <img border="0" src="'+mfBanners[mfBannerIndex][1]+'"></a>';
if( mfIe) {
document.all.banner.innerHTML = htmlString;
}
else {
document.layers["banner"].document.open();
document.layers["banner"].document.write( htmlString);
document.layers["banner"].document.close();
}
if(mfBannerIndex < mfBanners.length - 1)
mfBannerIndex++;
else
mfBannerIndex = 0;
}
setInterval("mfBannerChange()", 5000);
</script>
• copy and paste this code into the BODY of your HTML document :

<div id="banner" style="position:absolute; top:300; left:171;"></div>
• blinking text
• copy and paste the coding into the HEAD of your HTML document

<SCRIPT LANGUAGE="JavaScript">
window.onerror = null;
 var bName = navigator.appName;
 var bVer = parseInt(navigator.appVersion);
 var NS4 = (bName == "Netscape" && bVer >= 4);
 var IE4 = (bName == "Microsoft Internet Explorer"
 && bVer >= 4);
 var NS3 = (bName == "Netscape" && bVer < 4);
 var IE3 = (bName == "Microsoft Internet Explorer"
 && bVer < 4);
 var blink_speed=100;
 var i=0;
if (NS4 || IE4) {
 if (navigator.appName == "Netscape") {
 layerStyleRef="layer.";
 layerRef="document.layers";
 styleSwitch="";
 }else{
 layerStyleRef="layer.style.";
 layerRef="document.all";
 styleSwitch=".style";
 }
}
function Blink(layerName){
 if (NS4 || IE4) {
 if(i%2==0)
 {
 eval(layerRef+'["'+layerName+'"]'+
 styleSwitch+'.visibility="visible"');
 }
 else
 {
 eval(layerRef+'["'+layerName+'"]'+
 styleSwitch+'.visibility="hidden"');
 }
 }
 if(i<1)
 {
 i++;
 }
 else
 {
 i--
 }
 setTimeout("Blink('"+layerName+"')",blink_speed);
}
</script>
• copy and paste this code into the BODY of your HTML document  -->

<div id="prem_hint" style="position:relative; left:0; visibility:hidden" class="prem_hint">
<font color="#FF0000"><b>Welcome to the JavaScript Source!</b></font>
</div>
<script language="javascript">Blink('prem_hint');</script>
• colorful text fader :
• copy and paste this code into the HEAD of your HTML document :

<SCRIPT LANGUAGE="JavaScript">
var msg=new Array()
msg[0]="<CENTER>You can see more scripts like this one...</CENTER>";
msg[1]="<CENTER>...when you visit the JavaScript Source.</CENTER>";
msg[2]="<CENTER>Just type in \"<A href='http://javascript.internet.com/'>javascript.internet.com</A>\"</CENTER>";
msg[3]="<CENTER>Your computer can handle the rest.</CENTER>";
// set your first set of colors.  Use as many or as few as you wish.
var colors1=new Array("ffffff", "eeeeff", "ddddff", "ccccff", "bbbbff", "aaaaff", "9999ff",
"8888ff", "7777ff", "6666ff", "5555ff", "4444ff", "3333ff","2222ff", "1111ff", "0000ff")
//set your second set of colors
// *** must have exactly the same number of colors as the array above ***
var colors2=new Array("ffffff", "ffeeee", "ffdddd", "ffcccc", "ffbbbb", "ffaaaa", "ff9999",
"ff8888", "ff7777", "ff6666", "ff5555", "ff4444", "ff3333", "ff2222", "ff1111", "ff0000")
//set the height of the display in pixels
high=60;
//set the width of the display in pixels
wide=350;
//set the pixel coordinates for the upper left hand corner of the display
Xpos=220;
Ypos=180;
// move the display away from the edges of the background
pad=15;
bgcol="ffffff";
cellbg="faderbg.jpg";
fntFam="verdana,helvetica,arial";
fntSize=14;
// set how how many seconds you want the message to stay remain at totality.
pause=2.5;
icolor=0;
mcolor=1;
imsg=0;
spWidth=wide-(2*pad);
totality=false;
glowing=true;
var theMsg="";
var cellcontent="";
pause=pause*1000;
if(cellbg.length>4){cellbg=" background="+cellbg}
else{cellbg="";}
function doPause(){
   totality=false; t=setTimeout("changecolor()",pause);
   }
function initiate(){
   getContentColor();
   getMsg();
   getCellContent();
   if(document.all){
   msgbg.innerHTML=cellcontent;
   msgfade.innerHTML=theMsg;
   msgbg.style.posLeft=Xpos;
   msgbg.style.posTop=Ypos;
   msgfade.style.posLeft=Xpos+pad;
   msgfade.style.posTop=Ypos+pad;
   t=setTimeout("changecolor()",50);}
   if(document.layers){
   document.msgbg.document.write(cellcontent);
   document.msgbg.document.close();
   document.msgfade.document.write(theMsg);
   document.msgfade.document.close();
   document.msgbg.left=Xpos;
   document.msgbg.top=Ypos;
   document.msgfade.left=Xpos+pad;
   document.msgfade.top=Ypos+pad;
   t=setTimeout("changecolor()",100);}
   }
function changecolor(){
   if(totality==true){doPause();}
   else{
   getMsg();
   getContentColor();
   if(document.all){
   msgfade.innerHTML=theMsg;
   t=setTimeout("changecolor()",50);}
   if(document.layers){
   document.msgfade.document.write(theMsg);
   document.msgfade.document.close();
   t=setTimeout("changecolor()",70);}
   }
   }
function getFadeColor(){
   icolor=icolor-1;
   if(mcolor==1){contentcolor=colors1[icolor];}
   else{contentcolor=colors2[icolor];}
   }
function getGlowColor(){
   icolor=icolor+1;
   if(mcolor==1){contentcolor=colors1[icolor];}
   else{contentcolor=colors2[icolor];}
   }
function changemsg(){
   if(imsg==msg.length-1){imsg=0; mcolor=1;}
   else if(imsg != msg.lenght-1 && mcolor==1){imsg=imsg+1; mcolor=0;}
   else{imsg=imsg+1; mcolor=1;}
   }
function getContentColor(){
   if(icolor==colors1.length-1 && glowing==true){
   getFadeColor(); glowing=false; totality=true;}
   else if(icolor < colors1.length && glowing==true){
   getGlowColor();}
   else if(icolor < 1 && glowing==false){changemsg(); getGlowColor(); glowing=true;}
   else{getFadeColor();}
   }
function getMsg() {
   theMsg="<span style='font-size:"+fntSize+"pt; font-family:"+fntFam+"; width:"+spWidth+";'>"
   theMsg+="<B><font color="+contentcolor+">"+msg[imsg]+"</font></B> "
   theMsg+="</span>"
   }
function getCellContent(){
   cellcontent="<TABLE height="+high+
   " width="+wide+" bgcolor="+bgcol+" cellpadding=0 cellspacing=0><TR><TD"+cellbg+"> </TD></TR></TABLE>"}
</script>
• insert the onLoad event handler into your BODY tag :

<BODY onLoad="initiate()">
• copy this code into the BODY of your HTML document :

<DIV id=msgbg style="position: absolute;"></DIV>
<DIV id=msgfade style="position: absolute;"></DIV>
• timed popup :
• copy and paste this code into the HEAD of your HTML document  -->

<SCRIPT LANGUAGE="JavaScript">
function popupWin() {
text =  "<html>\n<head>\n<title>Pop Window</title>\n<body>\n";
text += "<center>\n<br>";
text += "<a href='http://javascript.internet.com/new' target='_blank'><h2>New JavaScripts</h2></a>";
text += "</center>\n</body>\n</html>\n";
setTimeout('windowProp(text)', 3000);   // delay 3 seconds before opening
}
function windowProp(text) {
newWindow = window.open('','newWin','width=300,height=100');
newWindow.document.write(text);
setTimeout('closeWin(newWindow)', 5000); // delay 5 seconds before closing
}
function closeWin(newWindow) {
newWindow.close();
}
</script>
• insert the onLoad event handler into your BODY tag  -->

<BODY onLoad="popupWin()">
• confirm entry or come back : copy this code into the HEAD of your HTML document  -->

<SCRIPT LANGUAGE="JavaScript">
var agree=confirm("I'd like to show you how to get this exact JavaScript message script.  OK?");
if (agree)
document.write("");
else
history.go(-1);
</SCRIPT>
• continuously changing link color : copy and paste the code in the HEAD of your HTML document :

<SCRIPT LANGUAGE="JavaScript">
function initArray() {
for (var i = 0; i < initArray.arguments.length; i++) {
this[i] = initArray.arguments[i];
}
this.length = initArray.arguments.length;
}
var colors = new initArray(
"red",
"blue",
"green",
"purple",
"black",
"tan",
"red");
delay = .5; // seconds
link = 0;
vlink = 2;
function linkDance() {
link = (link+1)%colors.length;
vlink = (vlink+1)%colors.length;
document.linkColor = colors[link];
document.vlinkColor = colors[vlink];
setTimeout("linkDance()",delay*1000);
}
linkDance();
</script>
• train station-like text : copy and paste this code into the BODY of your HTML document :

<script>
var text="This Text Here Scroll Thrpugh The ALPHABET!!! Numbers 0 1 2 3 4 5 6 7 8 and 9, comma, full stop. JavaScriptSource, your place for free scripts.";
document.write("<big><tt id=dis nowrap>Display Area</tt></big>");
var symtype=new Array(" ","A","a","B","b","C","c","D","d","E","e","F","f","G","g","H","h","I","i","J","j","K","k","L","l","M","m","N","n","O","o","P","p","Q","q","R","r","S","s","T","t","U","u","V","v","W","w","X","x","Y","y","Z","z","0","1","2","3","4","5","6","7","8","9",".",",","&","!","?","-","_");
var symarray=new Array();
for (var i=0; i<text.length; i++){
symarray[i]=" ";}
function scroll(){
for (var i=0; i<text.length; i++){
if (symarray[i]!=text.substring(i,i+1)) {
for (var x=0; x<70; x++) if (symarray[i]==symtype[x]) {symarray[i]=symtype[x+1]; break}}
}var outsym="";
for (var i=0; i<text.length; i++) outsym+=symarray[i];
dis.innerHTML=outsym;
setTimeout('scroll()',100);
}scroll();
</script>
• date-based messages
• copy and paste this code into the HEAD of your HTML document :

<SCRIPT LANGUAGE="JavaScript">
var days = new Array();
var msgs = new Array();
days[0] = "December 20, 1999";
msgs[0] = "Thanks for stopping by on my birthday!";
days[1] = "December 21, 1999";
msgs[1] = "Not Christmas yet, it's only the 21st.";
days[2] = "December 22, 1999";
msgs[2] = "Another day closer, almost there!";
days[3] = "December 23, 1999";
msgs[3] = "Wow, tomorrow is Christmas Eve!";
days[4] = "December 24, 1999";
msgs[4] = "It's Christmas Eve, thanks for visiting!";
days[5] = "December 25, 1999";
msgs[5] = "Welcome to this page on Christmas Day!";
var months = new Array("",
"January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
);
var today = new Date(); // today
var mon = months[today.getMonth() + 1]; // month
var day = today.getDate(); // day
var year = y2k(today.getYear()); // year
function dateMsg() {
for (i = 0; i < days.length; i++) {
tempdate = new Date(days[i]);
tempmonth = months[tempdate.getMonth() + 1];
tempday = tempdate.getDate();
tempyear = y2k(tempdate.getYear());
if (year == tempyear && mon == tempmonth && day == tempday)
return("Today is " + days[i] + ".  " + msgs[i]); // returns day message
   }
return("Today is " + mon + " " + day + ", " + year + "."); // returns default
}
function y2k(year) {
if (year < 2000)
year = year + 1900;
return year;
}
</script>
• copy and paste this code into the BODY of your HTML document  -->

<script>
document.write(dateMsg());
</script>
• definition message : copy and paste the coding into the BODY of your HTML document :

text<a href='javascript:alert("The word means .....");'>word</a>?
• link description while hovering
• copy and paste this code into the HEAD of your HTML document  -->

<SCRIPT LANGUAGE="JavaScript">
function setupDescriptions() {
var x = navigator.appVersion;
y = x.substring(0,4);
if (y>=4) setVariables();
}
var x,y,a,b;
function setVariables(){
if (navigator.appName == "Netscape") {
h=".left=";
v=".top=";
dS="document.";
sD="";
}
else
{
h=".pixelLeft=";
v=".pixelTop=";
dS="";
sD=".style";
   }
}
var isNav = (navigator.appName.indexOf("Netscape") !=-1);
function popLayer(a){
desc = "<table cellpadding=3 border=1 bgcolor=F7F7F7><td>";
if (a==1) desc += "The JavaScript Source Home Page!";
if (a==2) desc += "Updates on all the latest scripts added to the site!";
if (a==3) desc += "Browser our Table of Contents page!";
if (a==4) desc += "Get JavaScript assistance in our JS forum!";
if (a==5) desc += "Get the answers to our commonly asked JS questions!";
desc += "</td></table>";
if(isNav) {
document.object1.document.write(desc);
document.object1.document.close();
document.object1.left=x+25;
document.object1.top=y;
}
else {
object1.innerHTML=desc;
eval(dS+"object1"+sD+h+(x+25));
eval(dS+"object1"+sD+v+y);
   }
}
function hideLayer(a){
if(isNav) {
eval(document.object1.top=a);
}
else object1.innerHTML="";
}
function handlerMM(e){
x = (isNav) ? e.pageX : event.clientX;
y = (isNav) ? e.pageY : event.clientY;
}
if (isNav){
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = handlerMM;
</script>
• insert the onLoad event handler into your BODY tag  -->

<BODY OnLoad="setupDescriptions()">
• copy and paste this code into the BODY of your HTML document  -->

<div id="object1" style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2">layer hidden off the screen</div>
<a href="http://javascriptsource.com" onMouseOver="popLayer(1)" onMouseOut="hideLayer(-50)">Home Page</a>
<p>
<a href="http://javascriptsource.com/new.html" onMouseOver="popLayer(2)" onMouseOut="hideLayer(-50)">What's New?</a>
<p>
<a href="http://javascriptsource.com/toc.html" onMouseOver="popLayer(3)" onMouseOut="hideLayer(-50)">Site Contents</a>
<p>
<a href="http://javascriptsource.com/forum/" onMouseOver="popLayer(4)" onMouseOut="hideLayer(-50)">JavaScript Forum</a>
<p>
<a href="http://javascriptsource.com/faq/" onMouseOver="popLayer(5)" onMouseOut="hideLayer(-50)">JavaScript FAQs</a>
<p>
• sinusal snake text following the cursor : copy and paste this code into the BODY of your HTML document :

<script language="JavaScript">
var text="www.JavaScriptSource.com";
var textfont="Helvetica";
var textsize="24";
var textstyle="normal";
var textcolor="ffff00";
var amplitude="80";
var distance="20";
var speed="2";
var regkey="";
</script>
<script src="DS_CursorSinusText.js">
</script>
• scroll-text with the zoom effect : copy and paste this code into the BODY of your HTML document  -->

<script language="JavaScript">
var text="Free Scripts from the Source";
var textfont="fantasy";
var textstyle="bold";
var textsize="8";
var textcolor="ff00ff";
var transparency="yes";
var posy="150";
var zoomspeed="3";
var scrollspeed="3";
var zoomsize="48";
var regkey="";
var reglink="";
var regtarget="";
</script>
<script src="DS_ZoomScroll.js"></script
• DHTML tooltip generator
• DHTML media popup : copy and paste the coding into the BODY of your HTML document :

<script language="JavaScript1.2" src="cpw_example.js"></script>
<script language="JavaScript1.2" src="cpw.js"></script>
<a href="#" onClick="CPW_showWindow(1);return false;">Show Form</a><br>
<a href="#" onClick="CPW_showWindow(2);return false;">Show Image</a><br>
<a href="#" onClick="CPW_showWindow(3);return false;">Show Tip</a><br>
<a href="#" onClick="CPW_hideWindow(1);return false;">Hide Form</a><br>
<a href="#" onClick="CPW_hideWindow(2);return false;">Hide Image</a><br>
<a href="#" onClick="CPW_hideWindow(3);return false;">Hide Tip</a>
• drop-in content box
• copy and paste this code into the HEAD of your HTML document :

<style type="text/css">
#dropinboxv2cover{
width: 320px; /*change width to desired */
height: 220px;  /*change height to desired. REMOVE if you wish box to be content's natural height */
position:absolute; /*Don't change below 4 rules*/
z-index: 100;
overflow:hidden;
visibility: hidden;
}
#dropinboxv2{
width: 300px; /*change width to above width-20. */
height: 200px; /*change height to above height-20. REMOVE if you wish box to be content's natural height*/
border: 2px solid black;
background-color: lightyellow;
padding: 4px;
position:absolute;
left: 0;
top: 0;
}
</style>
<script type="text/javascript">
var dropboxleft=200 //set left position of box (in px)
var dropboxtop=100 //set top position of box (in px)
var dropspeed=15 //set speed of drop animation (larger=faster)
//Specify display mode. 3 possible values are:
//1) "always"- This makes the fade-in box load each time the page is displayed
//2) "oncepersession"- This uses cookies to display the fade-in box only once per browser session
//3) integer (ie: 5)- Finally, you can specify an integer to display the box randomly via a frequency of 1/integer...
// For example, 2 would display the box about (1/2) 50% of the time the page loads.
var displaymode="always"
if (parseInt(displaymode)!=NaN)
var random_num=Math.floor(Math.random()*displaymode)
var ie=document.all
var dom=document.getElementById
function initboxv2(){
if (!dom&&!ie)
return
crossboxcover=(dom)?document.getElementById("dropinboxv2cover") : document.all.dropinboxv2cover
crossbox=(dom)?document.getElementById("dropinboxv2"): document.all.dropinboxv2
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
crossbox.height=crossbox.offsetHeight
crossboxcover.style.height=parseInt(crossbox.height)+"px"
crossbox.style.top=crossbox.height*(-1)+"px"
crossboxcover.style.left=dropboxleft+"px"
crossboxcover.style.top=dropboxtop+"px"
crossboxcover.style.visibility=(dom||ie)? "visible" : "show"
dropstart=setInterval("dropinv2()",50)
}
function dropinv2(){
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
if (parseInt(crossbox.style.top)<0){
crossboxcover.style.top=scroll_top+dropboxtop+"px"
crossbox.style.top=parseInt(crossbox.style.top)+dropspeed+"px"
}
else{
clearInterval(dropstart)
crossbox.style.top=0
}
}
function dismissboxv2(){
if (window.dropstart) clearInterval(dropstart)
crossboxcover.style.visibility="hidden"
}
function truebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = ""
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset)
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
if (displaymode=="oncepersession" && get_cookie("droppedinv2")=="" || displaymode=="always" || parseInt(displaymode)!=NaN && random_num==0){
if (window.addEventListener)
window.addEventListener("load", initboxv2, false)
else if (window.attachEvent)
window.attachEvent("onload", initboxv2)
else if (document.getElementById || document.all)
window.onload=initboxv2
if (displaymode=="oncepersession")
document.cookie="droppedinv2=yes"
}
</script>
• copy and paste this code into the BODY of your HTML document  -->

<div id="dropinboxv2cover">
<div id="dropinboxv2">
You can add anything you like to the box.
<br>
<p align="right"><a href="#" onClick="dismissboxv2();return false">Close It</a></p>
</div>
</div>
• show link description on status bar while hovering :
• insert the onLoad event handler into your BODY tag  :

<BODY onLoad="window.defaultStatus = 'Hello' ">
• copy and paste this code into the BODY of your HTML document :

<p>
<a href="http://javascript.internet.com" onmouseover="window.status='JSS the home for free scripts';return true">JSS  Home</a></p>
<p>
<a href="http://javascript.internet.com/messages/" onmouseover="window.status='Dynamic Message Scripts!';return true">Messages</a></p>
<p>
<a href="http://javascript.internet.com/bgeffects/" onmouseover="window.status='Want to change the background effects on your site.';return true">JSS  Home</a></p>
• show page loading time
• copy and paste this code into the HEAD of your HTML document :

<script type="text/javascript">
var startTime=new Date();
function currentTime(){
  var a=Math.floor((new Date()-startTime)/100)/10;
  if (a%1==0) a+=".0";
  document.getElementById("endTime").innerHTML=a;
}
window.onload=function(){
  clearTimeout(loopTime);
}
</script>
• copy and paste this code into the BODY of your HTML document :

<script type="text/javascript">
  document.write('This page took <span id="endTime">0.0</span> seconds to load.');
  var loopTime=setInterval("currentTime()",100);
</script>
• message blinker
• copy and paste this code into the HEAD of your HTML document  -->

<style type="text/css">
.tab { font-weight:bold; font-size:12px; font-family:Arial;}
         A:link {color:blue;}
         A:visited{color: blue;}
         A:hover {color: red;}
    </style>
<script language=javascript>
var mswidth=250;
var msheight=60;
var mspause=1500; //1000=1s
var msspeed=500; // 1000=1s
var bcolor='#ffffcc';
var singlemessages='<div class=tab align="center"><a class=tab href=""><u>JavaScriptSource <div class=tab>WDVL<div class=tab>WebDevelopersJournal<div class=tab>JavaBoutique</u></a></div></div></div></div>'
var kkk=0;var timer1 = null;var timer2 = null;function startb(){if(document.all){iens6div=ieNS6sliderb;iens6marquee11();}else if(document.layers){ns4layerb=document.ns4sliderb0.document.ns4sliderb1;ns4layerb.visibility='show';ns4marquee11();}else if(document.getElementById){iens6div=document.getElementById('ieNS6sliderb');iens6marquee11(iens6div);}}function iens6marquee11(){iens6div.innerHTML=singlemessages;timer1=setTimeout("iens6marquee12(iens6div.style.top=msheight)",mspause);return;}function iens6marquee12(){timer2=setTimeout("iens6marquee11(iens6div.style.top=0)",msspeed);return;}function ns4marquee11(){ns4layerb.document.write(singlemessages);ns4layerb.document.close();timer1=setTimeout("ns4marquee12(ns4layerb.top=msheight)",mspause);return;}function ns4marquee12(){timer2=setTimeout("ns4marquee11(ns4layerb.top=0)",msspeed);return;}
</SCRIPT>
• insert the onLoad event handler into your BODY tag :

<BODY onLoad="startb()">
• copy and paste this code into the BODY of your HTML document  -->

<script language="JavaScript">document.write('<table align="center" border=2 CELLSPACING="0" CELLPADDING="0"><tr><td width='+mswidth+'>');if(document.all||document.getElementById){document.write('<div style="position:relative;overflow:hidden;width:'+mswidth+';height:'+msheight+';background-color:'+bcolor+';" onMouseover="if (timer1!=null){ clearTimeout(timer1);iens6div.style.top=0; kkk=1;} if (timer2!=null) {kkk=1; clearTimeout(timer2);}" onMouseout="if (kkk==1) { kkk=0; timer2=setTimeout(\'iens6marquee11(iens6div.style.top=0)\',msspeed);}"><div id="ieNS6sliderb" style="position:relative;width:'+mswidth+';height:'+msheight+';"></div></div>')}
</script><ilayer id="ns4sliderb0" width=&{mswidth}; height=&{msheight}; bgcolor=&{bcolor};><layer id="ns4sliderb1" width=&{mswidth}; height=&{msheight}; onMouseover='if (timer1!=null){ clearTimeout(timer1); ns4layerb.top=0; kkk=1;} if (timer2!=null){ kkk=1; clearTimeout(timer2); }' onMouseout='if (kkk==1) {kkk=0; timer2=setTimeout("ns4marquee11(ns4layerb.top=0)",msspeed);}'></layer></ilayer></td></tr></table>
• gradual neon script : copy and paste this code into the BODY of your HTML document :

<script language="JavaScript1.2">
var message="Welcome to JavaScriptSource!"
var neonbasecolor="gray"
var neontextcolor="yellow"
var flashspeed=100  //in milliseconds
var n=0
if (document.all||document.getElementById){
document.write('<font color="'+neonbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
document.write('</font>')
}
else
document.write(message)
function crossref(number){
var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
return crossobj
}
function neon(){
if (n==0){
for (m=0;m<message.length;m++)
//eval("document.all.neonlight"+m).style.color=neonbasecolor
crossref(m).style.color=neonbasecolor
}
crossref(n).style.color=neontextcolor
if (n<message.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",1500)
return
}
}
function beginneon(){
if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)
}
beginneon()
</script>
• letter-by-letter highlighting
• copy and paste this code into the HEAD of your HTML document  -->

<script type="text/javascript">
var bgcolour="#ffffff"; // background colour
var hlcolour="#bfceff"; // highlight colour
var speed=250; // speed colours change, 1 second = 1000
var w3c=document.getElementById;
var ie45=document.all;
var p_txt, p_cnt=0;
window.onload=function() {
  if (w3c||ie45) {
    var phone=(w3c)?document.getElementById("phonein"):document.all["phonein"];
    p_txt=(w3c)?phone.firstChild.nodeValue:phone.innerHTML;
    if (ie45) {
      var phoni="";
      for (var i=0; i<p_txt.length; i++) phoni+='<sp'+'an id="phon'+i+'">'+p_txt.charAt(i)+'</'+'span>';
      phone.innerHTML=phoni;
    } else {
      while (phone.childNodes.length) phone.removeChild(phone.childNodes[0]);
      for (var i=0; i<p_txt.length; i++) {
        var phoni=document.createElement("span");
        phoni.setAttribute("id", "phon"+i);
        phoni.appendChild(document.createTextNode(p_txt.charAt(i)));
        phone.appendChild(phoni);
      }
    }
    p_cnt=p_txt.length-1;
    phone=setInterval ("phon1()", speed);
  }
}
function phon1() {
  var p_ct=p_cnt%p_txt.length;
  var p_tmp=(w3c)?document.getElementById("phon"+p_ct):document.all["phon"+p_ct];
  p_tmp.style.backgroundColor=bgcolour;
  p_tmp.style.fontWeight="normal";
  p_ct=++p_cnt%p_txt.length;
  p_tmp=(w3c)?document.getElementById("phon"+p_ct):document.all["phon"+p_ct];
  p_tmp.style.fontWeight="bold";
  if (((w3c)?p_tmp.firstChild.nodeValue:p_tmp.innerHTML)!=" ") p_tmp.style.backgroundColor=hlcolour;
}
</script>
• copy this code into the BODY of your HTML document :

<span id="phonein">text to be highlighted letter by letter</span>
• please wait message : copy the coding into the BODY of your HTML document :

 <script language="javascript">
  function do_totals1()
  {
  document.all.pleasewaitScreen.style.pixelTop = (document.body.scrollTop + 50);
  document.all.pleasewaitScreen.style.visibility="visible";
  window.setTimeout('do_totals2()',1);
  }
  function do_totals2()
  {
  lengthy_calculation();
  document.all.pleasewaitScreen.style.visibility="hidden";
  }
  function lengthy_calculation()
  {
  var x,y
 for(x=0;x<1000000;x++)
   {
   y += (x * y) / (y - x);
   }
  }
  </script>
  <DIV ID="pleasewaitScreen" STYLE="position:absolute;z-index:5;top:30%;left:42%;visibility:hidden">
   <TABLE BGCOLOR="#000000" BORDER="1" BORDERCOLOR="#000000" CELLPADDING="0" CELLSPACING="0" HEIGHT="100" WIDTH="150" ID="Table1">
    <TR>
     <TD WIDTH="100%" HEIGHT="100%" BGCOLOR="silver" ALIGN="CENTER" VALIGN="MIDDLE">
      <FONT FACE="Arial" SIZE="4" COLOR="blue"><B>Calculating<br>
        Please Wait</B></FONT>
     </TD>
    </TR>
   </TABLE>
  </DIV>
   <input type="button" name="btn_calc" value="Perform Calculation" onclick="do_totals1()">
• notify the user is an image on your site fails to load properly or if it is aborted when loading. Definitely an excellent example of the onAbort and onError image event handlers in use. Please note that in the script example we intentionally included a 'broken image' that fails to load properly to display the script in use.
• mouse orbit : a series of dots orbit the mouse cursor on the page, giving the appearance of a comet effect.
• bubbles float up from mouse giving the effect that the mouse is under water. The bubbles even expand in Internet Explorer. Copy the coding into the BODY of your HTML document

<BODY BGCOLOR="#000000">
<SCRIPT LANGUAGE="JavaScript">
Image0 = new Image();
Image0.src = "BubBlack.gif";
Amount = 20;
Ymouse = -50;
Xmouse = -50;
Ypos = new Array();
Xpos = new Array();
Speed = new Array();
rate = new Array();
grow = new Array();
Step = new Array();
Cstep = new Array();
nsSize = new Array();
ns = (document.layers)?1:0;
(document.layers)?window.captureEvents(Event.MOUSEMOVE):0;
function Mouse(evnt) {
Ymouse=(document.layers)?evnt.pageY-20:event.y-20;
Xmouse=(document.layers)?evnt.pageX:event.x;
}
(document.layers)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
for (i = 0; i < Amount; i++) {
Ypos[i] = Ymouse;
Xpos[i] = Xmouse;
Speed[i] = Math.random()*4+1;
Cstep[i] = 0;
Step[i] = Math.random()*0.1+0.05;
grow[i] = 8;
nsSize[i] = Math.random()*15+5;
rate[i] = Math.random()*0.5+0.1;
}
if (ns) {
for (i = 0; i < Amount; i++) {
document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0><img src="+Image0.src+" name='N' width="+nsSize[i]+" height="+nsSize[i]+"></LAYER>");
   }
}
else {
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < Amount; i++) {
document.write('<img id="si" src="'+Image0.src+'" style="position:absolute;top:0px;left:0px;filter:alpha(opacity=90)">');
}
document.write('</div></div>');
}
function MouseBubbles() {
var hscrll = (document.layers)?window.pageYOffset:document.body.scrollTop;
var wscrll = (document.layers)?window.pageXOffset:document.body.scrollLeft;
for (i = 0; i < Amount; i++){
sy = Speed[i] * Math.sin(270 * Math.PI / 180);
sx = Speed[i] * Math.cos(Cstep[i] * 4);
Ypos[i] += sy;
Xpos[i] += sx;
if (Ypos[i] < -40) {
Ypos[i] = Ymouse;
Xpos[i] = Xmouse;
Speed[i] = Math.random() * 6 + 4;
grow[i] = 8;
nsSize[i] = Math.random() * 15 + 5;
}
if (ns) {
document.layers['sn'+i].left = Xpos[i] + wscrll;
document.layers['sn'+i].top = Ypos[i] + hscrll;
}
else {
si[i].style.pixelLeft = Xpos[i] + wscrll;
si[i].style.pixelTop = Ypos[i] + hscrll;
si[i].style.width = grow[i];
si[i].style.height = grow[i];
}
grow[i] += rate[i];
Cstep[i] += Step[i];
if (grow[i] > 24) grow[i] = 25;
}
setTimeout('MouseBubbles()', 10);
}
MouseBubbles();
</script>
<div style="position:relative">
rest of page content, text and graphics etc.
</div>
• display the mouse's X and Y coordinates in the status window
• when visitors using Netscape right-click your Web page and select "View Source" or go to the View menu bar and select "View -> Page Source" the entire source code of your page is displayed. Interestingly enough, it's possible to actually insert an image into Netscape's view source page instead of just having text. When Netscape users view the source of your page, they see an image as well as the source code! Your image could tell the visitor that they are not allowed to view this source code, for example. A very simple but very clever script, ind