I have used some of these modules on my site. Perhaps you may like to try them. Their titles explain what they do. As with all code - use with care!

With acknowledgments to Bravenet


Refresh to another page



Scroll window

at the end scroll window()",??? 10=fast 250=slow

Delete this for no continuous scroll






<script language="JavaScript1.2">


var currentpos=0,alt=1,curpos1=0,curpos2=-1

function initialize(){



function scrollwindow(){

if (document.all)




if (alt==0)




if (alt==0)




if (curpos1!=curpos2){

if (document.all)











function startit(){






Fades in/out pages

<meta http-equiv="Page-Enter" content="blendTrans(Duration=2.0)">

<meta http-equiv="Page-Exit" content="blendTrans(Duration=2.0)">


Opens up a general window in window






Opens up an alert window


window.alert('Please read this important message');</script>


Opens up a dual answer box

<P><script>if(confirm('Do you want to see my pictures?')){location.href='c:/My Documents/upload-beeb-01/aboutme.htm'}elselocation.href='c:/My Documents/upload-beeb-01/buckets.htm'</script></P>


Get reply - no prompt


answer=prompt("Please tell me your name;","")alert(answer)


Get reply - prompt


answer=prompt("Please tell me your name;","John Smith")alert(answer)



Message bar

<script>window.status='This is my message';</script>


<font color="#FFFF00" size="6" face="Arial Black"><em><marquee

height="45" width="81%">The Official Anne Shelton Website</marquee></em></font>


From beeb index window

<SCRIPT>window.alert('Put your message here');</SCRIPT>


No right click

<script language="JavaScript">var message=" © Copyright.......Jackson_Media "

function click(e) {if (document.all) {if (event.button == 2) {alert(message);return false;}}if (document.layers) {if (e.which == 3) {alert(message);return false;}}}

if (document.layers) {document.captureEvents(Event.MOUSEDOWN);}document.onmousedown=click;



Jan. 28, 2002 Inside: Buttons | Traffic Links | Traffic Tips | The Archives

The New <BUTTON> Tag

Until now, you had two options for building Form Buttons. You could use text or an image, or you could get fancy with CSS. But here is a new Tag that makes coding online forms both more fun and functional.


OLD WAY: <INPUT TYPE="button" VALUE="Button Text">


The new button command makes creating buttons easy. The following code does exactly what the previous code does:

<BUTTON>Button Text</BUTTON> Button Text

This code makes a button with bigger text in Arial font, if it's on your computer:

<BUTTON><FONT FACE="Arial"><BIG>Big text</BIG></FONT></BUTTON> Big text

<BUTTON><FONT FACE="Arial" SIZE="5"><B>Bigger<BR>Bolder Text</B></FONT></BUTTON>


Bold Text

Now we have coloured text:

<BUTTON><FONT COLOR="#ff0000"><B>Look, colors!<BR>And line breaks!</B></FONT></BUTTON>

Look, colors!

And line breaks!

How about an image? Yes, an image inside a button!

<BUTTON><IMG SRC="image.gif"></BUTTON>

Now we have a table, and image and some Arial text!:




<TD align="center"><IMG SRC="image.gif"></TD>


<TD><FONT FACE="Arial">Get IE6!</FONT></TD>




Get IE6!

NOTE: You cannot include the following elements inside a <BUTTON>:

Another <BUTTON> tag

<SELECT> tag

<INPUT> tag

<A> tag

Other than that, it is pretty versatile!


Automatic Bookmark Script

Here's a simple JavaScript you can embed in any page on your site to allow your visitors to bookmark your site with just one click:

<script language="JavaScript">


var bookmarkurl=""

var bookmarktitle="Your_Title Here"

function addbookmark(){

if (document.all)





<a href="javascript:addbookmark()">Add to Bookmarks</a>


Warning - not tried!!!!!

Make this your home page.

<a href="../default.htm">Home Page</a>

<a href="../default.htm">HOME</a>&nbsp; |&nbsp; <a href="../contents/index.htm">CONTENTS </a>



BODY TAG Code Protection

While there is no way to completely hinder others from taking your source code, here are some very cool tricks you can use to make code-snatching a little more difficult. After all, webmasters are notoriously lazy; disabling right-click may well be enough to stop visitors from viewing Ė and taking Ė your valuable code.

All of the below tricks employ a tiny snippet of scripting code inside your page's BODY Tag. Try some of these to get a feel for what they accomplish when embedded into the tag.

Disable Right Click (to View Source):

<body oncontextmenu="return false">

Disable Mouse Dragging (Highlighting):

<body ondragstart="return false">

Disable Keyboard Use (Select/Copy):

<body onselectstart="return false">



This is a very compact and simple example of a drop down menu. Click on the arrow and the selection list drops. Click on the selection and the surfer is hyperlinked to the destination page.

Note: If this does not work from your email client, visit this page: Tips and Tricks Online.

The JavaScript code for this menu is below.


Change the link destination in the options

If you need more links, just add more <option></option> lines

Change the name of the link

Copy the code to your clipboard

Paste the code into your html page where ever you want this navigation menu to be located.

That's it. Very clean, simple and easy to use.

<form name="nav">

<select name="link" onChange="[].value;" value="GO">

<option selected>Choose Destination</option>

<option value=""></option>

<option value="">Tips & Tricks Archive</option>

<option value=""> Help Center</option>



As with most JavaScript, spacing is important. Please ensure that the second line of the code above is continuous without breaks.


loose adverts



function /*e*/;{

return false;


// -->



One way to help speed up your site and its pages is to have your images already waiting on the visitor's browser ahead of time.

Try the following trick to have your page load in one step:

Place this code between your <head> and </head> tags:

When your code asks for the images, instead of having to go back to the server to get them, they will already be in the user's browser cache.

<script language="JavaScript">

var image1 = new Image();

image1.src = "/image_path/image_name.gif";

var image2 = new Image();

image2.src = "/image_path/image2_name.gif";



One solution is to use meta tags to prevent pages from being cached. In this way, every time someone visits your site, they will be getting the latest content delivered to their browser.


<META http-equiv="Pragma" content="no-cache">


This simple line of code will tell the browser not to cache the page. This will slow down the loading of the page each time a visitor comes, but the benefit is the displaying of the fresh content.


This little script does just that. You can paste this into your html document in the location you would like the greeting to appear. Thatís all there is to it. Now, when someone visits your site the greeting will be:

Good Morning. Welcome to my site!

Good Afternoon. Welcome to my site!

Good Evening. Welcome to my site!

(Depending on what time it is on their computer.)


<!-- Begin

todaydate = new Date();



houris = todaydate.getHours();

if (houris > 17) display = "Evening";

else if (houris >12) display = "Afternoon";

else display = "Morning";

var welcome = ("Good " + display + ". Welcome to my site!");


// End -->



Form Based Jump Navigation

To save space and to provide a nifty way of giving your visitors access to your pages, you could consider using a form-based, drop-down jump navigation system. This is practical especially if you have many sections to your site, with multiple pages in each section.

Normally, you would have a series of links for each page, and more links underneath for all of the subpages. Using this Jump script, you could simply name the various sections, and place a form selector below each to show all the sub-pages, without taking all that space to show them.

<Script Language="JavaScript">

<!-- Hide from old browsers

function NavJump(list){location.href =

list.options[list.selectedIndex].value }

// end hiding --->




<OPTION SELECTED VALUE="index.html">Home Page

<OPTION VALUE="photos.html">Photos

<OPTION VALUE="links.html">Links


<INPUT TYPE="button" VALUE="Jump"



Here's a sample display, which will not work in email, but it gives you a graphical impression of what we're talking about:


Home PageHTML TipsPromote Your Site

Try this out by replacing the coded values with those of your choosing. All you need to change are the entries in the form itself; the script is generic and does not have to be altered. You can add an unlimited number of links without ever taking more space from your page. Note the first option box has the word "SELECTED" inside. This is a way to select which entry should be the default display.


Mini Tips for Webmasters

Highlight the Background of Text:

<span style="background-color:ffffcc;">Wow, that's yellow!</span>

Align Images to Absolute Vertical Center of Text:

<img src="image.gif" align="absmiddle">

Highlight Background Color of Links (embed in head tag):

<STYLE TYPE="text/css">a:hover{background-color:red;}</STYLE>

Timed redirect to another page automatically:

<META HTTP-EQUIV="refresh" CONTENT="10; URL=http://www.yoursite/newpage.htm">

Display messages in browser status bar on link hover:

<a href="index.htm" OnMouseOver="self.status='Go to my homepage!';

return true" onmouseout="self.status=''; return true">Visit this page.</a>

Adding a Title attribute to your links creates a mini-popup description:

<A HREF="" TITLE="Cool Website Tools!">Text</a>

Mask your published email addresses from collection by spiders:

<script language="JavaScript">

<!-- // Hide

var showtext = "Email Me";

var mailpart1 = "webmaster";

var mailpart2 = "";

document.write("<a href=" + "mail" + "to:" + mailpart1 +

"@" + mailpart2 + ">" + showtext + "</a>")




Displaying a Random Image and Hyperlink

Want to randomly display images and hyperlinks from a list? No problem, you can do it with a simple script like the one shown here. No need to learn server-side scripting, or slow down your pages with full-blown Java applications.

The script shown below randomly loads an image from the list you input each time a page is loaded into a browser. This example works with two images. You can add as many as you like. You can even add the same image twice to double its weighting. For example, if you have two images and would like one to be shown twice as much as the other one, simply add the preferred image twice (to total three images in all).

Here's the Script Code. All you have to do is replace the variable "imagenumber" with the correct amount of images you're using. Be sure to label each image with its corresponding number in the images array. Then do the same for the corresponding links. You can also control your image attributes in the display portion of this script, which begins with "document.write" ...

That's it. Load in your info, place the code where you want the images/links to display, refresh the page and watch what happens!


<!-- Hide

var imagenumber = 2 ;

var randomnumber = Math.random() ;

var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1 ;

images = new Array

images[1] = "Directory/First_Image_Name.jpg"

images[2] = "Directory/Second_Image_Name.jpg"

var myimage = images[rand1]

links = new Array

links[1] = "Directory/Your_Page.html"

links[2] = "Directory/Your_Page.html"

var mylink = links[rand1]

document.write('<A HREF="' + mylink + '"><IMG src="' + myimage + '"></A>')

// -- End Hiding -->


Naturally, you'll have to do a bit of editing to get your own images and links in place. Be sure to keep the imagenumber in sync with however many images and links you wish to use.


Fun with Forms

This is a really cool trick that lets your visitors copy text from your site with the click of a mouse. It can be very handy for issuing code, or any other text that you want your visitors to copy from your site. Here's how it works.

Put this part of the script between the <head></head> tags of your page.


.highlighttext{background-color:darkgray; color:#ffffff; font-face:Arial, helvetica, sans-serif; font-weight:bold; text-decoration:none;}


<script language="Javascript">


var copytoclip=1

function HighlightAll(theField) {

var tempval=eval("document."+theField)


if (document.all&©toclip==1){



window.status="Contents highlighted and copied to clipboard!"






Then in the body of your page, where you would like the box placed you insert this code:

<form name="test">

<div align="center"><a class="highlighttext" href="javascript:HighlightAll('test.select1')">Copy To Clipboard</a>

<textarea name="select1" rows=8 cols=30 wrap=no>These are some words that have no meaning. However, when put together they do a pretty good job of filling up the space to demonstrate this little script.</textarea></div>


It is a very simple little script, but it adds so much versatility to your website.

Note: Because of script restrictions in HTML email, we can not show an example of this script.


We showed you some time ago how to use form buttons as hyperlinks. How about taking those same buttons and dressing them up a bit. Consider the following code:

<form method="post" action="yourpage.htm"><input type="submit" value="Click Here to visit a page" style="font-family:arial; color:FFFFFF; font-weight:bold; background-color:green;"></form>

Seeing it in action:


If you donít like the looks of the standard form button modified like this you can use styles to modify simple hyperlinks as well.

<a href="somepage.htm"><span style="font-family:Arial; font-weight:bold; text-decoration:none; color:FFFFFF; background-color:blue;">Click Here For More Details</span></a>

Seeing it in action: Click Here For More Details


Highlighting Table Rows

This is so easy you'll wonder why you have never tried it before. Highlighting rows of table data with a new background color on mouseover is a very nice way to accentuate current data for the viewer. When the user hovers over a row, the color changes, highlighting the enclosed data for easy viewing. This makes it easier for the eye to see what it is meant to see.

All you need to do is add a very small piece of CSS code into the <TR> tag as shown below. Choose whichever color you would like.

<TABLE border="1" cellpadding="5" style="font-family:verdana; font-size:11px;">

<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#cccccc';" onMouseOut="this.bgColor='#ffffff';">

<TD>Row 1, Cell 1</td>

<TD>Row 1, Cell 2</TD>

<TD>Row 1, Cell 3</TD>

<TD>Row 1, Cell 4</TD>

<TD>Row 1, Cell 5</TD>


<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#cccccc';" onMouseOut="this.bgColor='#ffffff';">

<TD>Row 2, Cell 1</td>

<TD>Row 2, Cell 2</TD>

<TD>Row 2, Cell 3</TD>

<TD>Row 2, Cell 4</TD>

<TD>Row 2, Cell 5</TD>



Before you ask ... yes, you can also do this with the individual table cells by adding this code inside the <TD> tag.


This script puts two pics on the screen that change as the mouse goes over and links to your email. Change the email addy and two .jpg images.

<A ONMOUSEOVER="document['fpAnimswapImgFP13'].imgRolln=document['fpAnimswapImgFP13'].src;document['fpAnimswapImgFP13'].src=document['fpAnimswapImgFP13'].lowsrc;" ONMOUSEOUT="document['fpAnimswapImgFP13'].src=document['fpAnimswapImgFP13'].imgRolln" HREF=""><IMG BORDER="0" SRC="images/your01.jpg" WIDTH="122" HEIGHT="122" ALIGN="left" ID="fpAnimswapImgFP13" NAME="fpAnimswapImgFP13" LOWSRC="images/your02.jpg">