USERNAME:  
PASSWORD: 
  
 
 
 
 
 Enter your Keywords to
Search the Tips Archives
   
Random 20 Topics:

Prompting User Input - II
Controlling backgrounds with CSS
Search Engine Keywords
Meta Tags
Scrollbar Colors
Text Area
HTML Slideshow
Earthquake Script
CSS Hover Text
CSS Spans and Divs
Fun with Frames
JPG vs GIF
Dynamic Background Colors
Nowrap for Tables
Pinging Your Site in DOS
Validating Your HTML
Background Fun
Browser Detection
Search Engine Tips
Titles for HyperLinks (IE Only)

this list is made up of 20 random topics from our archives, use the search to find more topics! 

Search By Date:
   JanuaryFebuaryMarchAprilMayJuneJulyAugustSeptemberOctoberNovemberDecember                        
 20002001                        
  


    Join the List
    Bravenet Home 






 

Webmaster Tips and Tricks
Newsletter Archives 

Random Image/Link
February 1st, 2000


Want to randomly dispay 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, refresh the page and watch 
what happens! 

<SCRIPT LANGUAGE="JavaScript"> 
<!-- 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 --> 
</SCRIPT> 

--------------------------------------------------------------------------------------------------------


Mailto Tips
July 10th, 2000

Just about everyone knows how to code an email address into a Web site so 
that visitors can click a hyperlink to send a message. It's simple and 
effective and lets the user define his or her mail message without having to 
fill in any tedious forms. However, did you know that you can pre-assign 
both the subject and the body text using the mailto tag? It's really easy 
and can help you quickly identify messages as they come in. 

As you probably know, the HTML for the mailto anchor tag is used like this: 
<a href="mailto:name@domain.com">your_name@domain.com</a> 

This creates a hyperlink that, when clicked, will launch the user's default 
mail program with the coded address in the "to" line. Now, you can take this 
a step further by introducing the "Subject" variable. For example, if you 
want people to submit a job application, you can pre-code the subject. This 
is important if you get lots of mail as it will quickly let you know the 
subject of these messages. 

So, we would code the mailto like this: 

<a href="mailto:name@domain.com?Subject=Job_Application">ADDRESS</A> 

Note: no spaces are allowed ... use and underscore (_) 

Now, what if you wanted to pre-determine the Body Message as well? You may 
wish to do this if you have an offer that is always the same, such as a 
request for information. Let's say you're offering a free brochure. You can 
code the subject as "Free_Brochure" and the Body Message as "Please send me 
your brochure." 

We code the mailto this way: 

<a href="mailto:name@domain.com?Subject=Brochure&Body=Please 
send me your brochure.">ADDRESS</A> 

There you go, now you can save your visitors some time, and save yourself 
the anguish of strange email inquires by pre-coding your mailto expressions. 

	
 
-------------------------------------------------------------------------------------------------------------------



 Staples Business Services Merchant Accounts PRO Web Hosting for Only $6.95/mo + First Month Free! Call Center 
Plus Fulfillment ! 24/7 Services 
 
 
 
 

   
   USERNAME:  
PASSWORD: 
  
 
 
 
 
 Enter your Keywords to
Search the Tips Archives
   
Random 20 Topics:

Hiding from Hackers
New HTML4.0 tags
JavaScript Includes
Keyboard Shortcuts
Search Engine Keywords
Nesting Blockquotes
Hyperlink Descriptions (IE)
More Keyboard Shortcuts
Virtual Includes
Who is linking to you?
Viewing HTML Source
Line breaks and paragraphs
Horizontal Line Tips
Cookies - The Facts
CSS Non-Underlined Links
Random Image/Link
Status Bar Messages
JPG vs GIF
Titles for HyperLinks (IE Only)
Search Engine Tips

this list is made up of 20 random topics from our archives, use the search to find more topics! 

Search By Date:
   JanuaryFebuaryMarchAprilMayJuneJulyAugustSeptemberOctoberNovemberDecember                        
 20002001                        
  


    Join the List
    Bravenet Home 






 

Webmaster Tips and Tricks
Newsletter Archives 

Hiding from Hackers
July 3rd, 2001


If you get a lot of unsolicited mail piling up in your in box, you may have 
become the victim of an email spider. These nasty programs spread across the 
Web, archiving email addresses listed on websites for future mail delivery. 
Just about every website has at least one contact address listed, so just 
about every website is vulnerable to this kind of hack. 

There is a way you can prevent hackers from gathering your email address, 
since their spiders comb the source code of your site, and not the browser 
display. What we'll do is chop the components of an HREF Mailto Tag into 
separate source pieces using a simple Javascript. Consider this script: 

<script language=javascript> 
<!-- 
var showlink = "Contact Us"; 
var showname = "yourname"; 
var showhost = "yourhost.com"; 
document.write("<a href=" + "mail" + "to:" + showname + "&#64;" + showhost + 
">" + showlink + "</a>") 
//--> 
</script> 

Of course, you'll have to rewrite the variables to suit your needs. Notice 
how we also disguised the "@" symbol with its HTML Tag character counterpart 
(&#64). If you don't want to use JavaScript, you would probably be safe 
just to run with this: 

yourname&#64;yourhost.com 

While we're on the subject of special characters, look at the source code 
below. Looks like a bunch of garbage, right? Now place it into an HTML page 
and see what happens! 

&#66;&#82;&#65;&#86;&#69;&#78;&#69;&#84;&nbsp;&#82;&#79;&#67;&#75;&#83; 

   
 
    
 
All contents copyright 1997-2001 Bravenet Web Services Inc. 


-------------------------------------------------------------------------------------------------------



Webmaster Tips and Tricks
Newsletter Archives 

CSS Non-Underlined Links
September 11th, 2000


Last issue we introduced Cascading Style Sheets (CSS) and showed you how to 
create a mouseover hover effect in Internet Explorer with very little 
programming. This time we'll show you how you can eliminate 
browser-defaulted underlines in hyperlinked text. You do this with CSS and 
it works in both Internet Explorer and Netscape Navigator! 

Remember, with CSS you have the opportunity to define the style either in a 
separate file, as a reference on each page, or directly into the 
display-specific code. Let's analyze all three possibilities for removing 
underlines on hyperlinks. 

AS A FILE INCLUDE: 
Using Stylesheets as file includes is really the way they were meant to be 
used. You define the styles for your site in one file, then reference that 
file in each instance of your pages. You can have all kinds of definitions 
in your file, from how to show fonts to hyperlinks to headers, margins ... 
you name it! First you need to create a file to contain your style 
definitions. This can be done in any text or html editor. We will save the 
file with the extension .css -- in this case we'll create a file called 
mystylesheet.css. This file could contain many, many functions, but we'll 
limit this example to removing underlines from hyperlinks. Finally, we will 
upload this file to our server for reference by the page calling it. 

Copy the CSS code below and paste it into your editor and save it as 
mystylesheet.css. Then upload it to your server (root directory is good). 

A { text-decoration: none; } 

To make this work, we need to reference this file in the head of each page 
that will access the stylesheet. We do this by embedding a link to the 
stylesheet as shown below in the Head Section of our page (of course, it 
won't work if you forget to upload the stylesheet first!): 

<HTML> 
<HEAD> 
<TITLE>Test</TITLE> 
<LINK TYPE="text/css" HREF="mystylesheet.css" REL=stylesheet 
TITLE="mystylesheet"> 
</HEAD> 
<BODY> 
<a href="file.html">A link without underline</a> 
</BODY> 
</HTML> 


AS A PAGE REFERENCE: 
<HTML> 
<HEAD> 
<TITLE>Test</TITLE> 
<style type=text/css>A { text-decoration : none; }</style> 
</HEAD> 
<BODY> 
<a href="file.html">A link without underline</a> 
</BODY> 
</HTML> 


AS A DISPLAY REFERENCE: 
You write the code manually into the <A HREF> tag and define it. 
<HTML> 
<HEAD> 
<TITLE>Test</TITLE> 
</HEAD> 
<BODY> 
<a href="file.html" style="text-decoration : none">A link without 
underline</a> 
</BODY> 
</HTML> 


   
 
    
 
All contents copyright 1997-2001 Bravenet Web Services Inc. 


-----------------------------------------------------------------------------------------------------------------


Webmaster Tips and Tricks
Newsletter Archives 

Current Date
February 1st, 2000

Looking for an easy way to add the current date to a page? Look no further. 

Here's a very simple JavaScript that you can use to display the date as 
determined by the user's browser. The first variable can be changed to alter the way the month is displayed. In 
this expample they are shortened to reduce the amount of space required. You can edit these to display the full 
month 
name if you like. If you use this script, remember you'll have to change the 
year come January 2001... 

Here's the script: 

<SCRIPT LANGUAGE="JavaScript"> 
var monthNames = new Array( 
"Jan.","Feb.","March","April","May","June","July","August","Sept.","Oct.","Nov 
.","Dec."); 
var now = new Date(); 
document.write(monthNames[now.getMonth()] + " " + now.getDate() + ", " + 
2000); 
</SCRIPT> 


	
 
-------------------------------------------------------------------------------------------------------------------


Webmaster Tips and Tricks
Newsletter Archives 

Opening New Browsers
May 1st, 2000

Ever wondered how to open a new Browser Window with a hyperlink? To 
do that, all you need to do is add the Target attribute to your link 
tag: 

<A HREF="http://www.bravenet.com/" target="_blank">Bravenet.com</A> 

This will open a new Browser Window when clicked. You should use this 
method if your site uses Frames as your visitors will be trapped 
inside your site if you don't. Conversely, this attribute also works 
well to target Frames within a site. For example, if your right Frame 
is the main portion of the site and you want your page to display 
inside it, you would use the Target attribute like this: 

<A HREF="my_page_link.html" TARGET="frame_name">My Page Link</A> 

Finally, you can also use this method with image links: 

<A HREF="http://www.site.com" target="_blank"><IMG SRC="image.jpg"></A> 


	
 
----------------------------------------------------------------------------------------------------------------



Webmaster Tips and Tricks
Newsletter Archives 
	
JavaScript Includes
October 23rd, 2000

Our last tips newsletter discussed Server Side Includes (Virtual Includes) 
as a method of creating single files for multi-page components such as 
headers, footers, navigation menus, etc. Bravenet Member Christian Hess 
Araya mailed in with an alternative using JavaScript includes. Here's how it 
works. 

Rather than using a server-side solution, we can employ JavaScript includes 
to save our HTML code as a series of "document.write" statements in a .js 
file, then include it in our main page via a <SCRIPT> tag. For example, 
suppose we want the following code 

Click <A HREF="http://www.bravenet.com">here</A> to visit Bravenet. 

to appear in several different html pages on a site. We simply create a .js 
file (bravenet.js) with the following contents: 

<!-- 
document.write('Click <A HREF="http://www.bravenet.com">here</A> to visit 
BraveNet'); 
--> 

Note that we have omitted the "script" tag ... this comes later. We then 
save this .js file and then link to it at the appropriate places (within the 
BODY tags, not in the document HEAD) of our file(s) like this: 

<SCRIPT LANGUAGE="javascript" TYPE="text/javascript" 
SRC="bravenet.js"></SCRIPT> 

This has the effect of displaying the code from our .js source file wherever 
we place this script tag. If we have a menu of links, for example, we can 
put that on all pages of our site using the included file; if we save a 
change to that file, all other pages that reference it will change as well. 
Pretty cool! 

	
 	
    
------------------------------------------------------------------------------------------------------------



Webmaster Tips and Tricks
Newsletter Archives 
	
Single Page Links
May 22nd, 2000

If you have a long page with lots of info, you may want to provide relative 
links to sections of your page from a menu of links. To do this you use the 
# symbol in your A HREF code. For example, let's say you have three links on 
your page that you wish to target from the top of your page. All you need to 
do is to create the anchors with the Name Tag. Then you source your 
hyperlinks at the top of the page, referencing the # symbol. It's easier 
than it sounds. Have a look: 

<A HREF="#TOP">Go to the Top</A><BR> 
<A HREF="#MIDDLE">Go to the middle</A><BR> 
<A HREF="#BOTTOM">Go to the bottom</A><BR> 

These hyperlinks will jump to the anchors you create throughout your page. 
You can call them anything you like, as long as they relate to the 
hyperlinks: 


<A NAME="TOP"><A> 
This appears at the top of the page. 

<A NAME="MIDDLE"></A> 
This references info at the middle of the page. 

<A NAME="BOTTOM"></A> 
This anchors to the bottom of the page. 

Give it a try, it can be very useful for FAQ's, Links, or any other 
information that tends to get long on your page. Have some Hyperlink Fun! 

	
 	
    
-----------------------------------------------------------------------------------------------------------------



Webmaster Tips and Tricks
Newsletter Archives 
	
Text Area
March 1st, 2000

Do you know how to make a text area? Text areas allow you to type 
in a large amount of text so that it doesn't take up as much room on 
your page. Your visitor can scroll down the text area to read all the 
text in the box. Just include this tag in the body of your HTML, wherever you 
want the box to appear. You can change the "rows" and "cols" tag to 
make your text area any size you want (be sure to open and close 
a form as well): 

<FORM><textarea rows="5" cols="20" wrap="virtual"> 
Put your text here</textarea></FORM> 

You can also dress up your text boxes with color. Adding a few style 
tags changes the color of the background, and you can also add a 
border. You can change the things that you see in bold text, the size 
of the box (rows and cols), the font, font color etc. The border color 
will be the same as your font color. NOTE: The style attributes will 
only work running under MS Explorer 4.0 or higher. 

<FORM> 
<textarea rows="5" cols="50" 
style="background:#your color here" 
style="font-family:your font here" 
style="color:#your font color here" 
style="border style:solid" 
wrap="virtual"> Put your text here </textarea> 
</FORM> 


	
 	
    
---------------------------------------------------------------------------------------------------------

 
   USERNAME:  
PASSWORD: 
  
 
 
 
 
 Enter your Keywords to
Search the Tips Archives
   
Random 20 Topics:

Mini Scripts and Tricks
MouseOver Sound Effect
Refining Image Placements
No cache!
Refresh Pages
Hiding your Scripts
New HTML4.0 tags
Tuning Your Tables
Browser Power Tools
Single Page Links
Search Engine Tips
Forms as Hyperlinks
Current Date
File Last Updated
Prompting User Input
CSS: Embedding Fonts
Automatic Bookmarking
Fixing NS Image Link Glitch
Smoothing out Images
Virtual Includes

this list is made up of 20 random topics from our archives, use the search to find more topics! 

Search By Date:
   JanuaryFebuaryMarchAprilMayJuneJulyAugustSeptemberOctoberNovemberDecember                        
 20002001                        
  


    Join the List
    Bravenet Home 






 

Webmaster Tips and Tricks
Newsletter Archives 

Opening New Browsers
May 1st, 2000


Ever wondered how to open a new Browser Window with a hyperlink? To 
do that, all you need to do is add the Target attribute to your link 
tag: 

<A HREF="http://www.bravenet.com/" target="_blank">Bravenet.com</A> 

This will open a new Browser Window when clicked. You should use this 
method if your site uses Frames as your visitors will be trapped 
inside your site if you don't. Conversely, this attribute also works 
well to target Frames within a site. For example, if your right Frame 
is the main portion of the site and you want your page to display 
inside it, you would use the Target attribute like this: 

<A HREF="my_page_link.html" TARGET="frame_name">My Page Link</A> 

Finally, you can also use this method with image links: 

<A HREF="http://www.site.com" target="_blank"><IMG SRC="image.jpg"></A> 


   
-------------------------------------------------------------------------------------------------------------------
 

Image Tips and Tricks 
If you want to incorporate both images and text into single display areas, there are several 
ways you can do this. You can wrap your text around an image or you can space your image 
beside the text. Either way, they both work very well and both are easy to accomplish.

The first one we will look at is wrap/align:

Use this piece of code: <img src = "image.name" align="right" hspace="5" vspace="5"> 
Now place that INSIDE of your paragraph text. Note the "align" attribute of the image tag 
can be "left" or "center" as well. Try placing the image in different spots inside your text 
block to get varied results. You may also experiment with the hspace and vspace values to 
get a desired effect.

Now let's see how to separate text and images using tables.

<table>
<tr>
<td>Your paragraph here</td>
<td>Blank Space, Image Spacer, or Cell Width to Align</td>
<td><img src = "image.name"></td>
</tr>
</table>

By placing the image in the third cell, and separating the text with the second cell, we can 
change the appearance of these two elements. You have some choices here: You can use 
blank spaces, a spacer image, and/or set the width value of the spacer cell to the amount 
needed. Either way, you can now have cleanly separated text and images in same horizontal 
space on your page.

-----------------------------------------------------------------------
Webmaster Tips and Tricks
Newsletter Archives 

Status Bar Messages July 10th, 2000  Have you ever noticed the status bar on your browser? You 
know, the strip at  the bottom of the window that shows you the status of current document  transfers and 
connections to remote sites. Did you know you can code a  message to appear in that box in place of the 
default on mousing over  hyperlinks? This is very easy to do and can entice the user to click if the  right 
message is used. Here's how it all works:   <A HREF="home.html" onMouseOver="self.status='Go Home!' ; 
return  true;">Home</A><BR>   <A HREF="page2.html" onMouseOver="self.status='Go to Page 2' ; return  
true;">Home</A><BR>   Notice the JavaScript we've included within the HREF Tag.  This defines the 
message and targets the URL in question.  You can have as many of these as you have links on your page!   	

---------------------------------------------------------------------

Webmaster Tips and Tricks
Newsletter Archives 

Multi-Colored Table Borders December 20th, 2000  In a previous issue, we showed you how to 
create a border effect on your  tables by placing a table inside another, with the first table given a  cellpading of 
1 pixel and a background color of black. This has the effect  of displaying a 1 pixel black border around the 
inner table. Here's an  example.   <table border="0" cellpadding=1 cellspacing=0 bgcolor="#000000">  <tr>  
<td>  <table border="0" cellpadding=10 cellspacing=0  bgcolor="#FFFFFF">  <tr>  <td>text</td>  </tr>  
</table>  </td>  </tr>  </table>   An astute Bravenet member saw this trick, and showed us that by using layers  
of outer tables, we can create multi-colored border layers for a cool effect  to our inner table. So, for a double-
colored border, we use three tables,  two outer and the main inner table, and so on. Here's an example of a  
triple-table that creates a dual-color border.   <table bgcolor="#000000" cellpadding="1" cellspacing="0" 
border="0">  <tr>  <td>  <table border="0" cellpadding="3" border="0" bgcolor="#FF8000">  <tr>  <td>  <table 
border="0" bgcolor="#ffffcc">  <tr>  <td>  Here is our Text!  </td>  </tr>  </table>  </td>  </tr>  </table>  </td>  
</tr>  </table>   Try pasting this code into a page and see what happens. We have coded  the first border at 1 
pixel and black for a nice crisp outer border. The  second border table creates an orange border of 3 pixels, 
while the main  table with content is yellow and we have padded that with a value of 10  pixels. Play with the 
variations of this process to get the effect you are  looking for. This works in both IE and Netscape and offers 
real control over  table displays without resorting to IE-specific tags of border colors.   Finally, a word on 
indentation -- you'll note that we have indented each  instance of the <TR> and <TD> tags. This is essential if 
you have other  people working on your pages, as non-indented table code is very hard to  examine and will 
waste time. In fact, get into this habit even if you  are the only person working on your code. You'll thank 
yourself when you  start using nested tables!   

---------------------------------------------------------------------------------

Webmaster Tips and Tricks
Newsletter Archives 

No Right-Click Script March 1st, 2000  Have you ever wondered how to prevent people from looking 
at  your source code? Well, the following script will disable the  rightclick on your page (this script is provided 
here with written  permission from the author). When someone right clicks to save an  image off your page, a 
message will come up letting people know  that your information is copyrighted. This script only works on 
newer  browsers, and it's not foolproof. If someone really wants something  from your page they can find ways 
around it, but at least it's a warning  to people who want to take your graphics. Just copy and paste the  
following code, and make sure it comes right after your <head> tag:   <script language="JavaScript">  <!--  var 
popup="Sorry, right-click is disabled.\n\nThis Site Copyright  ©2000";  function noway(go) {  if (document.all) {  
if (event.button == 2) {  alert(popup);  return false;  }  }  if (document.layers) {  if (go.which == 3) {  alert(popup);  
return false;  }  }  }  if (document.layers) {  document.captureEvents(Event.MOUSEDOWN);  }  
document.onmousedown=noway;  // --> </script>   	

--------------------------------------------------------------------

Webmaster Tips and Tricks
Newsletter Archives 

Page Transitions (IE) July 10th, 2000  How would you like to welcome visitors to your pages with 
awesome  transition effects that grab your attention? You can do this by using  special Meta Tags in the Head 
portion of your page. This is super cool  and super easy to implement. Here's what you have to do. Just insert  
the code as shown within the Head section of your page.   <META HTTP-EQUIV="Page-Enter"  CONTENT = 
"RevealTrans (Duration=4, Transition=23)">  <META HTTP-EQUIV="Page-Exit"  CONTENT = "RevealTrans 
(Duration=4, Transition=23)">   "Duration" is the amount of time in seconds for the effect to take place.  The 
default and minimum value is 4. "Transition" is the actual effect,  displayed as a number value between 1 and 
23. (A list of all available  effects is shown below.)   The effect shown here (23) is a random configuration of all  
effects. You can choose them separately of course.   You can use these to create effects on either page entry 
or exit.  Play around with them and have some fun. Remember, though,  they only work with IE 4 or better 
(which is 75% of all users).   Here's the list of Transition types and their associated numeric values:   Box in = 
0  Box out = 1  Circle in = 2  Circle out = 3  Wipe up = 4  Wipe down = 5  Wipe right = 6  Wipe left = 7  
Vertical blinds = 8  Horizontal blinds = 9  Checkerboard across = 10  Checkerboard down = 11  Random 
dissolve = 12  Split vertical in = 13  Split vertical out = 14  Split horizontal in = 15  Split horizontal out = 16  
Strips left down = 17  Strips left up = 18  Strips right down = 19  Strips right up =20  Random bars horizontal = 
21  Random bars vertical = 22  Random = 23  	

--------------------------------------------------------------------
Webmaster Tips and Tricks
Newsletter Archives 

JavaScript Includes October 23rd, 2000  Our last tips newsletter discussed Server Side Includes 
(Virtual Includes)  as a method of creating single files for multi-page components such as  headers, footers, 
navigation menus, etc. Bravenet Member Christian Hess  Araya mailed in with an alternative using JavaScript 
includes. Here's how it  works.   Rather than using a server-side solution, we can employ JavaScript includes  
to save our HTML code as a series of "document.write" statements in a .js  file, then include it in our main 
page via a <SCRIPT> tag. For example,  suppose we want the following code   Click <A 
HREF="http://www.bravenet.com">here</A> to visit Bravenet.   to appear in several different html pages on a 
site. We simply create a .js  file (bravenet.js) with the following contents:   <!--  document.write('Click <A 
HREF="http://www.bravenet.com">here</A> to visit  BraveNet');  -->   Note that we have omitted the "script" 
tag ... this comes later. We then  save this .js file and then link to it at the appropriate places (within the  BODY 
tags, not in the document HEAD) of our file(s) like this:   <SCRIPT LANGUAGE="javascript" 
TYPE="text/javascript"  SRC="bravenet.js"></SCRIPT>   This has the effect of displaying the code from our 
.js source file wherever  we place this script tag. If we have a menu of links, for example, we can  put that on 
all pages of our site using the included file; if we save a  change to that file, all other pages that reference it will 
change as well.  Pretty cool!   	
 
-------------------------------------------------------------------

Webmaster Tips and Tricks
Newsletter Archives 

More CSS Styling October 22nd, 2001  CSS is a great way to add "style" to the graphical output of 
HTML pages.  Look at the two code samples below, a form textarea and an input button. See  how they have 
been spiced up with CSS Styles!   <textarea style="background-color:000000; color:ffffff;  font-
family:verdana,arial,helvetica; font-size:10pt;">White  Text!</textarea><br><br>  <input type="submit" 
value="This is neat!" style="font-family:verdana;  color:ffffff; font-size:12pt; background:000088;">   Notice the 
addition of a style attribute to these 2 examples? Why not grab  the code and take a look at them in your 
favorite editor?   Of course, not all of these attributes will be processed by all browsers, so  it is always a good 
idea to define attributes in raw HTML wherever possible  also. For example, the SPAN tag is a handy tool you 
can use to define  attributes of fonts, table cells etc. But these attributes may not dispay  properly in older 
browsers. To get the best display, we hard code HTML  values outside of the SPAN tag. Here is an 
example:<br><br>   <font color="0000ff"><span style="color:ff0000;">This text is  red.</span></font>   Now, 
why would you want to complicate things by using both CSS and HTML?  Because there are many more 
attributes available in CSS. For instance, we  could set an abnormal font size, mouse-over effect or other 
attributes to  this font, which will not display by old browsers. The HTML coding outside  of our span ensures 
at least a likeness of our span charactaristics for such  browsers.    Here is an example of a CSS Style for the 
Table Cell tag:   <table>  <tr>  <td style="background:000000; font-family:arial;  text-
decoration:underline;"><FONT FACE="Verdana, Arial, Helvetica" SIZE="1"  COLOR="#ffffff"><b>Notice the 
underline? This is not defined in a font or  underline tag, but the table cell itself!!</font></td>  </tr>  </table>   
As always, feel free to copy/paste this code in your editor and see how it  works, and modify it to suit your 
needs!   	
 
-----------------------------------------------------------------------

Downloading Files from Your Site 
One question we hear asked a lot is: "How can I allow visitors to download files from my 
site?"

The answer is simple. All you need to do is point to your files using the HREF tag. However, 
the file must be in a format that will not execute or display on a browser. Instead, if the 
browser can't recognize the file, it will launch a download window. 

For most purposes, you should try "zipping" your files for optimum results. Zip files are 
compressed and therefore download faster, and you can zip images, sounds or even HTML 
files without worrying about them actually executing. If you have never used Zips or other 
compression formats, visit CNET or Download.com for more info.

If you need to download a "clickable" file, you can get around this by telling your visitors to 
press the SHIFT Key and then Right Click to save the file to their own computers.

Sample: <a href = "yourfile.ext">Download my file</a>


------------------------------------------------------------------------
MOUSE EFFECTS 

Some people love them, others hate them. Whatever your taste, mouse effects are common 
and can be highly entertaining inclusions on just about any website.

Here are two distinct scripts you can use to create a flashy mouse trail on your pages. Have 
fun and play with the code all you like to customize these scripts for your own projects. 

Script One - Elastic Mouse Trail:
First download this bullet image  or substitute an image of your own by changing the script 
code, which you can copy right from the textarea below. 

NOTE: Script code should be placed inside your page's <BODY> tags.



<div id="dot0" style="position: absolute; visibility: hidden; height: 11; width: 11;">
	<img src = "bullet.gif" height=11 width=11>
</div>
<div id="dot1" style="position: absolute; height: 11; width: 11;">
	<img src = "bullet.gif" height=11 width=11>
</div>
<div id="dot2" style="position: absolute; height: 11; width: 11;">
	<img src = "bullet.gif" height=11 width=11>
</div>
<div id="dot3" style="position: absolute; height: 11; width: 11;">
	<img src = "bullet.gif" height=11 width=11>
</div>
<div id="dot4" style="position: absolute; height: 11; width: 11;">
	<img src = "bullet.gif" height=11 width=11>
</div>
<div id="dot5" style="position: absolute; height: 11; width: 11;">
	<img src = "bullet.gif" height=11 width=11>
</div>
<div id="dot6" style="position: absolute; height: 11; width: 11;">
	<img src = "bullet.gif" height=11 width=11>
</div>

<script LANGUAGE="JavaScript">
<!-- hide code

//Elastic Trail script (By Philip Winston @ pwinston@yahoo.com, URL: 
http://www.geocities.com/pwinston/)

var nDots = 7;

var Xpos = 0;
var Ypos = 0;

  // fixed time step, no relation to real time
var DELTAT = .01;
  // size of one spring in pixels
var SEGLEN = 10;
  // spring constant, stiffness of springs
var SPRINGK = 10;
  // all the physics is bogus, just picked stuff to
  // make it look okay
var MASS = 1;
// Positive XGRAVITY pulls right, negative pulls left
// Positive YGRAVITY pulls down, negative up
var XGRAVITY = 0;
var YGRAVITY = 50;
// RESISTANCE determines a slowing force proportional to velocity
var RESISTANCE = 10;
  // stopping criterea to prevent endless jittering
  // doesn't work when sitting on bottom since floor
  // doesn't push back so acceleration always as big
  // as gravity
var STOPVEL = 0.1;
var STOPACC = 0.1;
var DOTSIZE = 11;
  // BOUNCE is percent of velocity retained when   // bouncing off a wall
var BOUNCE = 0.75;

var isNetscape = navigator.appName=="Netscape";

  // always on for now, could be played with to
  // let dots fall to botton, get thrown, etc.
var followmouse = true;

var dots = new Array();
init();

function init()
{
    var i = 0;
    for (i = 0; i < nDots; i++) {
        dots[i] = new dot(i);
    }
        if (!isNetscape) {
        // I only know how to read the locations of the         // <LI> items in IE
        //skip this for now
        // setInitPositions(dots)
    }
        // set their positions
    for (i = 0; i < nDots; i++) {
        dots[i].obj.left = dots[i].X;
        dots[i].obj.top = dots[i].Y;
    }
            if (isNetscape) {
        // start right away since they are positioned
        // at 0, 0
        startanimate();
    } else {
        // let dots sit there for a few seconds
        // since they're hiding on the real bullets
        setTimeout("startanimate()", 1000);
    }
}



function dot(i) {
    this.X = Xpos;
    this.Y = Ypos;
    this.dx = 0;
    this.dy = 0;
    if (isNetscape) {	
        this.obj = eval("document.dot" + i);
    } else {
        this.obj = eval("dot" + i + ".style");
    }
}


function startanimate() {	
    setInterval("animate()", 20);
}


// This is to line up the bullets with actual LI tags on the page
// Had to add -DOTSIZE to X and 2*DOTSIZE to Y for IE 5, not sure why
// Still doesn't work great
function setInitPositions(dots)
{
    // initialize dot positions to be on top     // of the bullets in the <ul>
    var startloc = document.all.tags("LI");
    var i = 0;
    for (i = 0; i < startloc.length && i < (nDots - 1); i++) {
        dots[i+1].X = startloc[i].offsetLeft
            startloc[i].offsetParent.offsetLeft - DOTSIZE;
        dots[i+1].Y = startloc[i].offsetTop +
            startloc[i].offsetParent.offsetTop + 2*DOTSIZE;
    }
    // put 0th dot above 1st (it is hidden)
    dots[0].X = dots[1].X;
    dots[0].Y = dots[1].Y - SEGLEN;
}

// just save mouse position for animate() to use
function MoveHandler(e)
{
    Xpos = e.pageX;
    Ypos = e.pageY;	      return true;
}

// just save mouse position for animate() to use
function MoveHandlerIE() {
    Xpos = window.event.x + document.body.scrollLeft;
    Ypos = window.event.y + document.body.scrollTop;	  }

if (isNetscape) {
    document.captureEvents(Event.MOUSEMOVE);
    document.onMouseMove = MoveHandler;
} else {
    document.onmousemove = MoveHandlerIE;
}


function vec(X, Y)
{
    this.X = X;
    this.Y = Y;
}

// adds force in X and Y to spring for dot[i] on dot[j]
function springForce(i, j, spring)
{
    var dx = (dots[i].X - dots[j].X);
    var dy = (dots[i].Y - dots[j].Y);
    var len = Math.sqrt(dx*dx + dy*dy);
    if (len > SEGLEN) {
        var springF = SPRINGK * (len - SEGLEN);
        spring.X += (dx / len) * springF;
        spring.Y += (dy / len) * springF;
    }
}


function animate() {	
    // dots[0] follows the mouse,
    // though no dot is drawn there
    var start = 0;
    if (followmouse) {
        dots[0].X = Xpos;
        dots[0].Y = Ypos;	
        start = 1;
    }
        for (i = start ; i < nDots; i++ ) {
                var spring = new vec(0, 0);
        if (i > 0) {
            springForce(i-1, i, spring);
        }
        if (i < (nDots - 1)) {
            springForce(i+1, i, spring);
        }
                // air resisitance/friction
        var resist = new vec(-dots[i].dx * RESISTANCE,
            -dots[i].dy * RESISTANCE);
                // compute new accel, including gravity
        var accel = new vec((spring.X + resist.X)/MASS + XGRAVITY,
            (spring.Y + resist.Y)/ MASS + YGRAVITY);
                // compute new velocity
        dots[i].dx += (DELTAT * accel.X);
        dots[i].dy += (DELTAT * accel.Y);
                // stop dead so it doesn't jitter when nearly still
        if (Math.abs(dots[i].dx) < STOPVEL &&
            Math.abs(dots[i].dy) < STOPVEL &&
            Math.abs(accel.X) < STOPACC &&
            Math.abs(accel.Y) < STOPACC) {
            dots[i].dx = 0;
            dots[i].dy = 0;
        }
                // move to new position
        dots[i].X += dots[i].dx;
        dots[i].Y += dots[i].dy;
                // get size of window
        var height, width;
        if (isNetscape) {
            height = window.innerHeight + window.pageYOffset;
            width = window.innerWidth + window.pageXOffset;
        } else {	
            height = document.body.clientHeight + document.body.scrollTop;
            width = document.body.clientWidth + document.body.scrollLeft;
        }
                // bounce off 3 walls (leave ceiling open)
        if (dots[i].Y >=  height - DOTSIZE - 1) {
            if (dots[i].dy > 0) {
                dots[i].dy = BOUNCE * -dots[i].dy;
            }
            dots[i].Y = height - DOTSIZE - 1;
        }
        if (dots[i].X >= width - DOTSIZE) {
            if (dots[i].dx > 0) {
                dots[i].dx = BOUNCE * -dots[i].dx;
            }
            dots[i].X = width - DOTSIZE - 1;
        }
        if (dots[i].X < 0) {
            if (dots[i].dx < 0) {
                dots[i].dx = BOUNCE * -dots[i].dx;
            }
            dots[i].X = 0;
        }
                // move img to new position
        dots[i].obj.left = dots[i].X;			
        dots[i].obj.top =  dots[i].Y;		
    }
}

// end code hiding -->
</script>



Script Two - Circular Mouse Trail:
All you have to do is copy this code and paste it directly after the <BODY> Tag on your page. It 
will create a star formation, that orbits around the mouse location, pretty neat!



<LAYER NAME="a0" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ffffff" 
CLIP="0,0,1,1"></LAYER>
<LAYER NAME="a1" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#fff000" 
CLIP="0,0,1,1"></LAYER>
<LAYER NAME="a2" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ffa000" 
CLIP="0,0,1,1"></LAYER>
<LAYER NAME="a3" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ff00ff" 
CLIP="0,0,1,1"></LAYER>
<LAYER NAME="a4" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#00ff00" 
CLIP="0,0,1,1"></LAYER>
<LAYER NAME="a5" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FF00FF" 
CLIP="0,0,1,1"></LAYER>
<LAYER NAME="a6" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FF0000" 
CLIP="0,0,1,1"></LAYER>
<LAYER NAME="a7" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ffffff" 
CLIP="0,0,2,2"></LAYER>
<LAYER NAME="a8" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#fff000" 
CLIP="0,0,2,2"></LAYER>
<LAYER NAME="a9" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ffa000" 
CLIP="0,0,2,2"></LAYER>
<LAYER NAME="a10" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ff00ff" 
CLIP="0,0,2,2"></LAYER>
<LAYER NAME="a11" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#00ff00" 
CLIP="0,0,2,2"></LAYER>
<LAYER NAME="a12" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#0000ff" 
CLIP="0,0,2,2"></LAYER>
<LAYER NAME="a13" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FF0000" 
CLIP="0,0,2,2"></LAYER>


<script language="JavaScript">
if (document.all){
with (document){
write('<div id="starsDiv" style="position:absolute;top:0px;left:0px">')
write('<div style="position:relative;width:1px;height:1px;background:#ffffff;font-
size:1px;visibility:visible"></div>')
write('<div style="position:relative;width:1px;height:1px;background:#fff000;font-
size:1px;visibility:visible"></div>')
write('<div style="position:relative;width:1px;height:1px;background:#ffa000;font-
size:1px;visibility:visible"></div>')
write('<div style="position:relative;width:1px;height:1px;background:#ff00ff;font-
size:1px;visibility:visible"></div>')
write('<div style="position:relative;width:1px;height:1px;background:#00ff00;font-
size:1px;visibility:visible"></div>')
write('<div style="position:relative;width:1px;height:1px;background:#0000ff;font-
size:1px;visibility:visible"></div>')
write('<div style="position:relative;width:1px;height:1px;background:#FF0000;font-
size:1px;visibility:visible"></div>')
write('<div style="position:relative;width:2px;height:2px;background:#ffffff;font-
size:2px;visibility:visible"></div>')
write('<div style="position:relative;width:2px;height:2px;background:#fff000;font-
size:2px;visibility:visible"></div>')
write('<div style="position:relative;width:2px;height:2px;background:#ffa000;font-
size:2px;visibility:visible"></div>')
write('<div style="position:relative;width:2px;height:2px;background:#ff00ff;font-
size:2px;visibility:visible"></div>')
write('<div style="position:relative;width:2px;height:2px;background:#00ff00;font-
size:2px;visibility:visible"></div>')
write('<div style="position:relative;width:2px;height:2px;background:#0000ff;font-
size:2px;visibility:visible"></div>')
write('<div style="position:relative;width:3px;height:3px;background:#FF0000;font-
size:3px;visibility:visible"></div>')
write('</div>')
}
}

if (document.layers)
{window.captureEvents(Event.MOUSEMOVE);}
var yBase = 200;
var xBase = 200;
var step = 1;
var currStep = 0;
var Xpos = 1;
var Ypos = 1;

if (document.all)
{
  function MoveHandler(){
  Xpos = document.body.scrollLeft+event.x;
  Ypos = document.body.scrollTop+event.y;
  }
  document.onmousemove = MoveHandler;
}

else if (document.layers)
{
  function xMoveHandler(evnt){
  Xpos = evnt.pageX;
  Ypos = evnt.pageY;
  }
  window.onMouseMove = xMoveHandler;
}

function animateLogo() {
if (document.all)
{
 yBase = window.document.body.offsetHeight/6;
 xBase = window.document.body.offsetWidth/6;
}
else if (document.layers)
{
 yBase = window.innerHeight/8;
 xBase = window.innerWidth/8;
}

if (document.all)
{
 for ( i = 0 ; i < starsDiv.all.length ; i++ )
 {
  starsDiv.all[i].style.top = Ypos + yBase*Math.sin((currStep + 
i*4)/12)*Math.cos(400+currStep/200);
 starsDiv.all[i].style.left = Xpos + xBase*Math.sin((currStep + i*3)/10)*Math.sin(currStep/200);
 }
}

else if (document.layers)
{
 for ( j = 0 ; j < 14 ; j++ ) //number of NS layers!
 {
  var templayer="a"+j
  document.layers[templayer].top = Ypos + yBase*Math.sin((currStep + 
j*4)/12)*Math.cos(400+currStep/200);
  document.layers[templayer].left = Xpos + xBase*Math.sin((currStep + 
j*3)/10)*Math.sin(currStep/200);
 }
}
currStep+= step;
setTimeout("animateLogo()", 10);
}
animateLogo();
</script>


-----------------------------------------------------------------------------------


Webmaster Tips and Tricks
Newsletter Archives 

More CSS Definitions January 29th, 2001  Many of you have commented that Cascading Style 
Sheets (CSS) have made your  lives as webmasters a heck of lot easier. We agree. And while there are  
many, many ways you can employ CSS into your pages, here are some more  simple text effects you can 
create in a snap that will save you tons of  coding as well.   First off, if you are unfamilar with CSS, just imagine 
it as a way to add  style to your HTML tags. For example, if you know that tables employ a cell  tag called "TD" 
now you know that you can pre-define the text effect inside  any "TD" tag by using CSS. In the style defiintions 
that follow, we have  pre-assigned text values for a number of tags, including the Header tags, as  well as 
hyperlinks.   To use CSS, you must place your stylesheet into the Head Section of the  page on which you 
want these effects to happen. Or you can create a global  stylesheet and reference that in the Head Section 
like this:   <LINK TYPE="text/css" HREF="mystyle.css" REL="stylesheet" TITLE="mystyle">   This file 
(mystyle.css) would contain the actual stylesheet -- which, again,  you could include on your pages instead, 
especially if you want different  effects for different pages. Here's our sample stylesheet:   <style 
type="text/css">  <!--  body { font-family: Verdana,Arial, Helvetica, sans-serif; font-size: 10pt}  p { font-family: 
Arial ; font-size: 10pt }  td { font-family: Arial ; font-size: 12pt }  th { font-family: Verdana; font-size: 10pt }  h1 { 
font-family: Arial; font-size: 24pt; }  h2 { font-family: Times; font-size: 18pt; }  h3 { font-family: Arial; font-size: 
11pt; }  A:link { color:#000000; }  A:visited { color:#336633; }  A:hover { color:#FF0000; }  -->  </style>   You'll 
see that you no longer have to tag all your text, it's done  automatically by the stylesheet. This will save you 
tons of time. Note,  however, that some of these effects vary in their display from browser to  browser, so you 
might want to make sure before publishing, and eventually  you may wish to use a browser redirection like the 
one above. Also, it's not  necessary to comment your stylesheets, but it doesn't hurt.   	
 
--------------------------------------------------------------------------


Webmaster Tips and Tricks
Newsletter Archives 

Earthquake Script April 23rd, 2001  Have you ever wanted one of those really cool effects that makes 
people  wonder how you did it? Well this following tip will really "shake" them up!   <HTML>  <HEAD>  
<TITLE>EarthQuake</TITLE>  <script language="JavaScript" type="text/javascript">  function init() {  
setTimeout("shake(3)",1000);  setTimeout("this.focus()",4000);  setTimeout("shake(3)",4100);  }  function 
register()  {  var isAol = "no";  var res = 800 ;  }  function shake(n) {  if (self.moveBy) {  for (i = 10; i > 0; i--) {  
for (j = n; j > 0; j--) {  self.moveBy(0,i);  self.moveBy(i,0);  self.moveBy(0,-i);  self.moveBy(-i,0);  }  }  }  }  a=275;  
b=275;  r=20;  x=1;  z=1;  function rotate(r) {  while (z<=3) {  for (var i = 0; i <360; i++) {  x = (r * Math.cos((i * 
Math.PI)/180)) + a;  y = (r * Math.sin((i * Math.PI)/180)) + b;  window.moveTo(x,y);  }  z+= 1;  }  
setTimeout("shake(3)",10000);  }  </script>  </HEAD>  <BODY ONLOAD="init()" BGCOLOR="Black">  
</BODY>  </HTML>   Now, of course you can change this to include or exclude what you like. Just make sure 
that the <script></script> is inside of the <head></head> And that you have ONLOAD="init()" in your <body> 
tag.   Watch it rumble!  	

-------------------------------------------------------------------------


Webmaster Tips and Tricks
Newsletter Archives 

Displaying HTML Code June 3rd, 2000  There are a couple of ways to show actual HTML code on a 
page ... without it  actually converting to what has been coded. This is important to know if you  want people to 
display images, text, etc. from your site. An example might  be a remotely sourced image or logo that you 
would like others to show on  their sites. The best way to display code in HTML format is to use a  TEXTAREA 
Tag.  For example, to display HTML code for copying and pasting, such as we use  for Bravenet Services 
source code, place the code inside your Textarea Tag:  <!-- BEGIN CODE -->  <form method="post" 
action="NULL">  <textarea name="text" cols="50" rows="3" Wrap="Virtual">  <font face=arial size=2>This 
shows the font tag!</font>  </textarea>  </form>  <!--END CODE-->  Note the "wrap" attribute, this causes the 
text inside the box to wrap and  not flow along one line.   	

------------------------------------------------------------------

Webmaster Tips and Tricks
Newsletter Archives 

Forms as Hyperlinks May 7th, 2001  Here is a great way to use form buttons as links to your pages, 
while at the same time making sure everyone can use them! This is far more browser friendly than using 
Javascript, so you will know that everyone can use it.   <form method="post" action="link"><input 
type="submit" value="text"></form>   Replace "link" with the URL you want others to go to. This may be your 
homepage, a friend's page, or a famous website you want people to visit. It doesn't matter! The button can be 
as simple as "Click here" or as descriptive as "Press Now to go to mysite.com". You can do this by changing 
"text" with any word or phrase you wish to type that you think will invite others to click on the button. It's your 
choice, experiment with it!   	

------------------------------------------------------------------------


Webmaster Tips and Tricks
Newsletter Archives 

Meta Tags June 28th, 2000  When you submit your site to AltaVista or many of the other  search 
engines that use spiders, they only ask you for one thing -  your URL. Why? It's simple, they send a spider to 
crawl your site  for all the other details. And the very first thing this spider  looks for is ... Meta Tags!   If you 
don't have Meta Tags in place, things can get ugly. The spider will move  to the text on your page, with the end 
result being a really messy site  description and no keywords ... that's bad!   Here's the basic layout of meta 
tags and what they do:  <META NAME="TITLE" CONTENT="This is what appears at the top of all 
browsers.">   <META NAME="DESCRIPTION" CONTENT="This is where you put the description of your  
site. Put some vital keywords here, but keep the description under 1,000 characters.">   <META 
NAME="KEYWORDS" CONTENT="This is where you list all of the keywords that  pertain to your site. Make 
sure there is a space between each word and DO NOT repeat  them more than 7 times.">   <META 
NAME="ROBOTS" CONTENT="index,follow">  (This tells the spider to follow links on your site and list other 
pages.)   <META NAME="REVISIT-AFTER" CONTENT="4 weeks">  (This tells the spider to re-visit your site 
in x amount of time.)   There are a bunch more Meta Tags you can use to help your search engine  
placements. For more info on these mysterious but essential tags, go here:  
http://www.bravenet.com/reviews/searchtips/4metatags.php   	

-------------------------------------------------------------------

Webmaster Tips and Tricks
Newsletter Archives 

No cache! August 1st, 2001  One of the most common questions we get from Bravenet members is:   "I 
can't see my new content! I JUST updated! What is wrong?"  or: "How can I stop browser caching on my 
site?"   You probably cannot see your new content, because your browser is "caching" a previous version of 
the site you have visited. Your browser has taken what it has already seen, and saved it to your hard drive in 
your cache folders. When you go back to the page, it will load the saved version on your hard drive into your 
browser to save load time.   This is a time-saving feature in most cases, but sometimes it can be annoying, 
especially when you have new content up. Your site visitors may not see it because they have your old page 
cached on their hard drives.   Here is the easiest way to stop your site from saving itself to your visitors' 
computers:   Between your <HEAD> and </HEAD> tags, place this code:  <META http-equiv="Pragma" 
content="no-cache">   That line will cause your browser to say: "Do not save a local copy. Load from the 
server." Simple right? Right! This little tip can save a lot of headaches.   What is the downside to no-cache? If 
you have a large amount of images on your page, and they take a long time to load, no-caching will cause the 
images to load again each time. If they are cached, images will be already saved already and will load more 
faster.    	
 
-------------------------------------------------------------------------------


Popup Windows April 15th, 2000  Pop-up windows are a terrific way to present your visitors with 
information in tidy boxes without making them go to a whole new page or making them sift through other 
elements on  a page. You can use pop-ups for many purposes; let's see how we could use one to display a 
Bravenet Announcer.   We can have the pop-up occur on page load or on a hyperlink click. Both methods can 
be used to bring up a small window that contains your announcer code, instead of just having it display on a 
page of your site. It looks great, and it will prompt the visitor to do something, in this case either to use the 
announcer or to close the window. We use a simple JavaScript to launch the window, and eventually to close it 
as well.   The script below causes the window to appear when the page is loaded:   <script 
language="JavaScript" for="window" event="onload()">  
window.open("http://www.bravenet.org/tips/announcer.htm", "myannouncer", 
"scrollbars=no,resizable=no,height=230,width=170")  </script>   Or you can use this script which makes a link 
open a pop-up window:   <A HREF="javascript:void(0)" ONCLICK="open('announcer.htm', 
'myannouncer','toolbar=0,location=0,resizable=1,width=170,height=230')">  <B>Recommend This 
Site!</B></A>    The file "announcer.htm" contains the source code for a Bravenet Announcer (you know 
where to get that, right?). The script creates the window on page load -- notice how we have described the 
window dimensions and defaults.   Our next step is to close the window after the announcement has been 
processed. After a person submits their announcement, they'll be taken to a thank-you page. This page will 
also load in the pop-up window as that's the browser window it is being called to. To close this window after 
the thank-you page appears, simply use a closing script, like this:   <FORM>  <DIV ALIGN="CENTER">  
<B>Thanks for<BR>recommending<BR>my web site!</B>  <BR><BR>  <INPUT TYPE='button' 
VALUE='Close Window' onClick='window.close()'>  </DIV>  </FORM>   Finally, you don't have to just use this 
fancy pop-up window for just the announcer. Why not pop open your guestbook, or your forum?    	
 
-------------------------------------------------------------------------------


Titles for HyperLinks (IE Only)
December 4th, 2000

Did you know the A HREF tag carries a "title" attribute, similar to the "alt 
text" for images? What this does is drop a small display below the 
hyperlink, which you can specify with the attribute of title. Do it like 
this: 

<a href="myfile.htm" title="Click if You Dare">Click Here</a> 

Now, rather than just "Click Here", when the user mouses over your link, he 
or she will aslo see your title, in this case we have given the title 
attribute the value of "Click if you Dare." These can be as long as you want 
and can help to provide additional information for the hesitant clicker ... 




-----------------------------------------------------------------------------------

Tuning Your Tables
October 23rd, 2000

Tables are an important element in good web design; however, not many people 
appreciate the full set of attributes for the table cell tag. Here's a recap 
to help you fine-tune your tables in HTML. 

Each table cell requires an Opening <TD> tag and a Closing </TD> tag to work 
properly. You can insert text, images, anything that you would put on any 
other portion of your page, into a table cell. There are several attributes 
you can use to modify your cells: 

ALIGN This Attribute allows you to define Horizontal Alignment of text or 
objects in the cell. Correct values for this attribute are "left", "center" 
and "right" We code it like this: 
ALIGN="right" 

VALIGN This attribute lets you define the Vertical Alignment of text or 
objects in the cell. Correct values for this attribute are "top", 
"absmiddle" or "bottom". We code it like this: 
VALIGN="bottom" 

COLSPAN This attribute allows you to specify how many columns (horizontal 
cells) a cell should span across. The correct value is a numerical value 
entered like this: 
COLSPAN="2" 
The number you use depends on how many columns you wish to span. 

ROWSPAN This attribute allows you to specify how many rows (vertical cells) 
a cell should span across. The correct value is a numerical value entered 
like this: 
ROWSPAN="2" 
The number you use depends on how many rows you wish to span. 

BGCOLOR This attribute lets you specify the background color of that 
individual cell. You complete this attribute by entering a Hexadecimal Color 
Value, like this: 
BGCOLOR="#000000" or a Name Value, BGCOLOR="black" 

WIDTH This attribute lets you specify how wide the individual cell should 
be. You can use the percentage method or the absolute pixel width method. 
Percentage method: 
WIDTH="35%" 
(Note: Using the percentage method will give you a percentage of the width 
of the table, not the width of the page.) 
Absolute method: 
WIDTH="150" (This is the width of the cell in Pixels.) 


--------------------------------------------------------------------------------

Webmaster Tips and Tricks
Newsletter Archives 

MouseOver Sound Effect
September 25th, 2000

This is a really cool and fun JavaScript project you can customize for your 
own website. The effect we're going to create is to play a sound when a 
visitor passes the mouse over a particular image link. This could be a 
phone-ring for a telephone icon linking to a contact page, or whatever you 
want. Here's how it works. First, copy the main script below and place on 
your page. 

<SCRIPT LANGUAGE="JavaScript"> 
var agt=navigator.userAgent.toLowerCase(); 
var is_major=parseInt(navigator.appVersion); 
var is_minor=parseFloat(navigator.appVersion); 
var 
is_nav=((agt.indexOf('mozilla')!=-1)&&(agt.indexOf('spoofer')==-1)&&(agt.ind 
exOf('compatible')==-1) && 
(agt.indexOf('opera')==-1)&&(agt.indexOf('webtv')==-1)); 
var is_ie=(agt.indexOf('msie')!=-1); 
if(is_ie){var agt_ie=agt.substring(agt.indexOf('msie')+5); 
is_major=parseInt(agt_ie); is_minor=parseFloat(agt_ie);} 
var is_dom2=(document.getElementById); 

function jsStop( o ) { if(is_ie&&is_major>=4&&eval('document.'+o)){var 
e=eval('document.'+o);if(e.src&&e.src!=''&&e.ReadyState&&e.ReadyState>=4){e. 
stop();}}else{if(is_nav&&is_major>=3&&(is_major<4||eval('document.'+o))){eva 
l('document.'+o+'.stop()');}} } 
function jsPlay( o ) { if(is_ie&&is_major>=4&&eval('document.'+o)){var 
e=eval('document.'+o);if(e.src&&e.src!=''&&e.ReadyState&&e.ReadyState>=4){if 
(is_major>=5){e.play();}else{e.run();}}}else{if(is_nav&&is_major>=3&&(is_maj 
or<4||eval('document.'+o))){eval('document.'+o+'.play(false)');}} } 
</SCRIPT> 

Now use the code below for the actual link location, image and sound files 
you are going to use. Of course, you'll have to alter the code for your own 
image (image.gif) and sound files (welcome.wav), as well as the link URL. 
Now when a mouse goes over your image, the sound will play! 

<A HREF="http://www.bravenet.com" 
onMouseOver="javascript:jsPlay('thewav');return true" 
onMouseOut="javascript:jsStop('thewav');return true"><IMG SRC="image.gif" 
ALT="" WIDTH=200 HEIGHT=200 BORDER=0></A> 
<EMBED name="thewav" src="welcome.wav" autostart="false" mastersound 
hidden="true" volume=100 width=0 height=0></EMBED> 

By the way, if you're looking for terrific free sound clips, try this site: 
http://www.freeaudioclips.com/ 

	

-----------------------------------------------------------------------------------



Webmaster Tips and Tricks
Newsletter Archives 

Scrolling Status Bar Text
July 24th, 2000

We have been receiving numerous requests for the following trick, which 
shows you how to code a scrolling message in the browser's location bar. 
Consider the script below. Variables that you can change to suit your 
needs include the message itself, as well as the speed of delivery and 
a "spacer" to set between start and stop of each message iteration. 

<script language="JavaScript"> 
var msg = "Hello, this is a scrolling location bar message!"; 
var spacer = " "; 
var pos = 0; 
function ScrollMessage() 
{ 
window.status = msg.substring(pos, msg.length) + spacer + 
msg.substring(0,pos); 
pos++; 
if (pos > msg.length) pos = 0; 
window.setTimeout("ScrollMessage()", 150); 
} 
ScrollMessage(); 
</script> 

Note that we have used "periods" (.) for the spacer. You can use blank 
spaces as well by hitting the space bar. The message speed is indicated 
as a number value, in this case 200. The higher the number, the slower the 
speed of the message scroll. 


	
 
-----------------------------------------------------------------------------


Webmaster Tips and Tricks
Newsletter Archives 

JPG vs GIF
April 1st, 2000

GIF or JPEG, what's the difference? 
Different situations call for different image formats. For optimum display properties and to minimize download 
times, be sure to use the right format for the right job. Here are some tips: 
Web Graphics take advantage of file compression to minmize size. Both GIF and JPEG images are 
compressed files that significantly reduce file size. However, there are some differences that you should take 
into consideration. GIF images are ideal for images with relatively few colors and little gradation. A rule of 
thumb to apply here is if your image has few colors and those colors don't meld into each other, then use the 
GIF format -- your file will be considerably smaller than a JPEG and will be much clearer. On the other hand, if 
your image is dithered (colors bleeding into one another as in a photograph), JPEG is the way to go. Mulit-
color, dithered images will actually be smaller and clearer in JPEG format. 
Try a test by creating sample images in both formats and you'll soon get a feel for which format to use in which 
situation. 


------------------------------------------------------------------------------------------


Webmaster Tips and Tricks
Newsletter Archives 

JavaScript Alert
April 1st, 2000

Want to get the last word in? Then try this very simple JavaScript to alert your visitors when they leave a page. 
You could use this for a number of purposes: remind them to bookmark your site; ask them if they visited an 
important part of your site; thank them for visiting; or even display contact information as they exit. To do this 
and more, all you have to do is add a simple line of code to the Body Tag of your html code. 
<body onUnload="window.alert('Don\'t forget to bookmark this page!')"> 
You can replace the alert text to anything you want. Note how the apostrophe has been prefaced by a 
backslash. This prevents the script from ending too early. When a visitor leaves a page with this code 
embedded in the Body Tag, an alert box appears (with an alert sound, if enabled) to present your final 
message. You can have a lot of fun with this one! 
And, of course, if you want to make the alert happen on page load rather than exit, you guessed right, just 
replace "onUnload" with "onLoad". 

	

------------------------------------------------------------------------------------


Webmaster Tips and Tricks
Newsletter Archives 

Mini Scripts and Tricks
February 12th, 2001

You asked for them, so here they come, a trio of cool mini-scripts you 
can use for your sites. Send us your suggestions on what scripts you want 
and we'll do our best to hunt them down and publish them right here. 

a) Option Form Pop Up 
This script asks a yes or no response in a radio button and displays a 
message based on what was input in a pop-up alert box. Here is a sample: 

<form> 
<font face="verdana,arial" color="#9966FF" size="2"> 
<b>Do you like my page? 
Yes. 
<input type="radio" onClick="alert('Thank You')"> 
No. 
<input type="radio" onClick="alert('Too Bad')"> 
</font> 
</form> 

You can change the question and alert text response as you see fit. 


b) Cool Text Effects 
This is pretty neat stuff, style sheets that allow you to format specific 
text effects for shadows, drop shadows and glowing characters. Play with the 
variables to see which works best for you. Filter effect names are "shadow" 
"dropshadow" and "glow". 

<TABLE STYLE="filter:shadow(color=blue)"> 
<TR><TD> THIS IS COOL! </TD></TR> 
</TABLE> 


c) Text Spacing 
Similar to what we accomplished above, the text spacing display will create 
gaps between charcters on an assigned tag. Here's an example: 

<H4 STYLE="LETTER-SPACING:5pt">TEXT HERE</H4> 

The header size can be between H1 and H6. The actual letter spacing numeric 
variable can be altered as well (we show it here as 5 points between 
characters -- 5pt). 

	
-------------------------------------------------------------------------------

Webmaster Tips and Tricks
Newsletter Archives 

Cookies - The Facts
August 1st, 2001

We agree that cookies are tasty; however, we are not talking about food. On the Internet, cookies are of the 
"digital" variety. So what are cookies, and why are they used? Few technologies are as misunderstood or 
maligned as cookies. But you really have nothing to fear... 

The Facts: 
Cookies are simple files on your computer that web servers can access to both store and retrieve information 
on your computer. 
Cookies can be opened with any text editor at any time from your own computer in c:\WINDOWS\Temporary 
Internet Files. To delete in Internet Explorer: Tools>Internet Options>Delete Cookies. In Netscape: 
Edit>Preferences>Advanced>Cache. 
You can choose to accept or decline cookies. They are not forced. When you first open a browser and come to 
a site that requires cookies, you will be prompted to accept or decline. If you check the "Do not ask again" box 
for either option, you can forever accept or decline, or go on a case to case basis. 
Most sites that you visit use cookies in order to generate dynamic content. So if you go to a website and see a 
banner - then revisit the site 3 days later and see a new one - chances are a cookie is telling the internet to 
show you a different banner. 
Cookies used to remember information about you for when you re-visit the webpage you got the cookie from. 

The Fibs: 
Cookies give out anyone information that you do not tell it to." If you have filled out a form on a site with your 
email address, that cookie, and ONLY that cookie will have your email address to pass your email address to 
the SAME website. Cookies are NOT used to get information from your computer. 
"Cookies are giving away valuable personal information to companies!" The ONLY way that they can do that, is 
if you entered that information somewhere online - forgot about it, then came back to the same website later, 
and your information appeared there. Cookies only remember what YOU have told them. 
Cookies are simply a way to remember information that you have already given to a website for future use. That 
is all. 

	
------------------------------------------------------------------------------------------


Webmaster Tips and Tricks
Newsletter Archives 

Browser Detection
January 29th, 2001

What we want to do is detect which browser a visitor is using -- either MS 
Internet Explorer or Nestscape Navigator. As we all know, the way your site 
displays can be tremendously affected by the browser that is used to view 
your html code. 

In the script that follows, we are not concerned about specific browser 
versions, just which software is being used. This should be sufficient for 
just about any site. Once we have made this determination, we will direct 
the user to a version of our page, or our entire site, that has been 
specifically designed for that particular browser software. To do this, 
first place this script in the Head Section of your entry page, usually your 
"index" page. 

<script language="Javascript"> 
// Browser Redirect Start Here 
var Browser; 
Browser=navigator.appName; 
if (Browser == "Microsoft Internet Explorer") 
{location.href="msie.html"} 
if (Browser == "Netscape") {location.href="netscape.html"} 
// End of Browser Redirector Code 
</script> 

What will happen, as long as your files in this case are in the same 
directory, is that you'll send IE users to msie.html, and Netscape users 
will be whisked off to netscape.html. These two browsers represent about 95% 
of all users online; for those using Opera or some other browser, you can 
code a link to one of your pages in the Body Section of your entry page, as 
these users will not be redirected. 

By the way, if you feel that this is just too much work, we suggest you code 
your pages to be optimal in Netscape, as we have found that what works in 
Netscape will generally work in Explorer, but not the other way around. 

	
 
---------------------------------------------------------------------------------


Cool Scripts: Opening Mini Windows

Back to Cool Scripts	
 

There are certain times, while your site visitors cruise around your Web page, that it would 
be nice to pop open a little window to show certain pages or images, without going to a 
whole new Webpage. Little popup windows are extremely handy for presenting information 
while keeping the visitor on the same page. Let's look at some of the neat things we can do 
with popup windows.

To begin with, we're going to use a Javascript HREF to do what we want. Associated with the 
"Open" action are three sections or parameters. In the code below, you see the following:

open('sample.htm','miniwin','toolbar=1,location=0,width=300,height=300')

The first part is the webpage URL. The next is the "name" of the window (can be used for 
targeting). And the last section is any features for the window that will be popped open. This 
is explained further below. 


Opening a basic 300x300 window
» Open the Window 
Top of Form 1
Bottom of Form 1

<A HREF="javascript:void(0)"
ONCLICK="open('sample.htm','miniwin','toolbar=1,location=1,directories=1,status=1,menub
ar=1,scrollbars=1,resizable=1,width=300,height=300')">Open a Window</A>



Opening the window with all features turned off
» Open the Window 
Top of Form 2
Bottom of Form 2


<A HREF="javascript:void(0)"
ONCLICK="open('sample2.htm','miniwin','toolbar=0,location=0,directories=0,status=0,menu
bar=0,scrollbars=0,resizable=0,width=300,height=300')">Open A Window</A>



A List of Window Features ( 0=off , 1=on )
» TEST all values set to 1 (on) 
» TEST toolbar=0 (back, reload, home, etc.) 
» TEST location=0 (url input field) 
» TEST directories=0 (favorites) 
» TEST status=0 (at bottom of page) 
» TEST menubar=0 (file, edit, view, etc.) 
» TEST scrollbars=0 (can the person scroll?) 
» TEST resizable=0 (can the window be stretched) 
» TEST width=600 (width of window in pixels) 
» TEST height=400 (height of window in pixels) 
» TEST all values set to 0 (off) 



Adding a "close window button"
The close window button is nice to offer the reader. It can be in the form of a button, image, 
or a text link. 

» Try The `Close Me` Window 
Top of Form 3
Bottom of Form 3


Button link: <form><input TYPE="button" VALUE="Close Window" 
onClick="window.close()"></form>
<BR>
Text link: <a href="javascript:window.close()"><B>CLOSE WINDOW</B></a>
<BR>
Image link: <a href="javascript:window.close()"><IMG SRC="closeme.gif" BORDER=0 
ALT="CLOSE ME"></a>



Let the window close on its own.
You also have a choice to have the window "auto-close" after a specified amount of time. 
Add a small piece of code in the body tag and you're set. 

» Try the `Auto-Close` Window 
Top of Form 4
Bottom of Form 4

<!-- This goes in your body tag -->
<body onLoad="setTimeout(window.close, 3000)">
<!-- Change the number, 3000 = 3 seconds -->


Have the window open when the page loads.
Maybe you want to have a popup window open when the main page initially loads... 

» Try the `Pop-up when Arriving` Window 
Top of Form 5
Bottom of Form 5

<!-- This goes in your body tag -->
<body onLoad="window.open('hello.htm', 'newWindow', 
'scrollbars=0,resizable=0,height=120,width=170')">


Have the window open when you leave the page.
Maybe you want to have a popup window open when the visitor leaves the page... 

» Try the `Pop-up when Leaving` Window 
Top of Form 6
Bottom of Form 6

<!-- This goes in your body tag -->
<body onUnload="window.open('hello.htm', 'newWindow', 
'scrollbars=0,resizable=0,height=120,width=170')">

----------------------------------------------------------------------------

<body onLoad="window.open('C:/computer/belgeler.html', 'newWindow', 
'toolbar=1,location=1,directories=0,status=1,menubar=1,scrollbars=1,resizable=1')">


-----------------------------------------------------------------------------

Popup Windows

<script language="JavaScript" for="window" event="onload()"> 
window.open("http://www.bravenet.org/tips/announcer.htm", "myannouncer", 
"scrollbars=no,resizable=no,height=230,width=170") 
</script> 


<A HREF="javascript:void(0)" ONCLICK="open('announcer.htm', 
'myannouncer','toolbar=0,location=0,resizable=1,width=170,height=230')"> 
<B>Recommend This Site!</B></A> 

------------------------------------------------------------------------------------

Webmaster Tips and Tricks
Newsletter Archives 

Virtual Includes October 10th, 2000  If know what platform your host server runs on, you can take 
advantage of  virtual includes to simplify site-wide navigation. For example, you can use  a series of files to 
create a single page, allowing you to make changes to  one file only and have those changes appear across all 
pages of your site.  An example might be a header file that contains a banner script, or a menu  file that 
contains a table of hyperlinks.   Here's how it works. On the NT Platform (Microsoft's IIS Web Server), you  
use .asp file extensions in place of .htm or .html files. For Linux users  (Apache Web Server), you can create 
.php files. The idea is to split up your  pages into separate files, and them "include" those files into your pages.  
Here's an example for the NT Platform.   <!--#include file="header.asp"-->  HTML code for the page file  <!--
#include file="footer.asp"-->   For PHP under Linux, it will look like this:   <? include("header.php"); ?>  HTML 
code for the page file  <? include("footer.php"); ?>   If you're not running PHP in Linux, you can still use 
includes under the SSI  standard (server side include) in this way:   SSI Server Side Includes  <!--#include 
virtual="header.shtml"-->   The header and footer are separate files that reside, in this example, in  the root 
directory of your server. The files, header.asp and footer.asp,  represent blocks of code that eventually display 
as the top and bottom  portions of your page. So, if you have a page called index.asp, it would  call for the 
header first, then display the code of the index file itself,  then call for the footer file. The browser displays a 
page based on the  three files involved. You can have as many includes for each page as you  like. The benefit 
is obvious ... one change to the header file makes all  pages that contain it change as well. It's a terrific way to 
save time and  the hassle of coding all pages separately. Give it a try and see how Virtual  Includes can 
simplify your own website.   Note: you should contact your Web Host to make sure your Web Server can  
handle includes. By Default, IIS and Apache allow this, but your system  administrator will be able to confirm 
whether this form of scripting is  available to you.  	

-----------------------------------------------------------------------------------------
new windows
Sometimes you want to open links in new windows, sometimes it's better to remain in the current 
window. Here is a script that opens new windows, only when people leave your domain. Try the 
following code:
This code, when placed in your <HEAD> tag, will detect your site. If your links are on your site, 
they will open in the same window. If not - they will open in a NEW window! There is also a 
variable in the script to let your visitors decide if they want the same, or a new window.

<script language="JavaScript">
<!--
// Provided by JavaFile.com !

// 1)Enter your root domain below (All links containing this root will NOT open in new window):
var mydomain="yoursite.com"

// 2)Automatically open offsite links in new window? (1=yes, 0 will render a checkbox for manual 
selection)
var auto=1

if (!auto)
document.write('<form name="targetmain"><input type="checkbox" name="targetnew" checked 
onClick="dynamiclink()">Open off-site links in new window</form>')

function dynamiclink(){

if (auto||(!auto&&document.targetmain.targetnew.checked)){
for (i=0; i<=(document.links.length-1); i++) {
if (document.links[i].hostname.indexOf(mydomain)==-
1&&document.links[i].href.indexOf("http:")!=-1)
document.links[i].target="_blank"
}
}
else
for (i=0; i<=(document.links.length-1); i++) {
if (document.links[i].hostname.indexOf(mydomain)==-1)
document.links[i].target=""
}
}

if (auto)
window.onload=dynamiclink

// -->
</script>

-----------------------------------------------------------------------------------------
Response times

This script tests response times ... it's a lot of fun. Your visitors will love it!


<p>Test your Response time!</p>
Click on "Start" first, and wait until the background color changes. As soon as it changes, hit 
"stop!"

<script language="JavaScript">
<!--

//Reflext Tester- By Andy Scott (based on script by Jasper van Zandbeek)
//http://www.geocities.com/SiliconValley/Station/4320/
//Provided by JavaFile.com !

var startTime=new Date();
var endTime=new Date();
var startPressed=false;
var bgChangeStarted=false;
var maxWait=20;
var timerID;


var colors=new Array("tomato","chocolate","limegreen","crimson","darkslategray",
"aliceblue","mediumslateblue","cornflowerblue","darkorchid","darkkhaki","coral",
"darkolivegreen","cadetblue")

if (document.all||document.getElementById)
document.write('<div id="reflex" style="width:135;height:135;border:1px solid black" 
onClick="stopTest()"></div>')

function startTest()
{
        if (document.all)
        document.all.reflex.style.backgroundColor=colors[Math.floor(Math.random()*colors.length)];
        else if (document.getElementById)
	document.getElementById("reflex").style.backgroundColor=colors[Math.floor(Math.rando
m()*colors.length)];
        else if (document.layers)
        
document.reflexns.document.reflexns_sub.document.bgColor=colors[Math.floor(Math.random()*c
olors.length)];
	bgChangeStarted=true;
	startTime=new Date();
}

function remark(responseTime)
{
	var responseString="";
	if (responseTime < 0.10)
		responseString="Well done!";
	if (responseTime >= 0.10 && responseTime < 0.20)
		responseString="Nice!";
	if (responseTime >=0.20 && responseTime < 0.30)
		responseString="Could be better...";
	if (responseTime >=0.30 && responseTime < 0.60)
		responseString="Keep practising!";
	if (responseTime >=0.60 && responseTime < 1)
		responseString="Have you been drinking?";
	if (responseTime >=1)
		responseString="Did you fall asleep?";

	return responseString;
}

function stopTest()
{
	if(bgChangeStarted)
	{
		endTime=new Date();
		var responseTime=(endTime.getTime()-startTime.getTime())/1000;
                if (document.all)
		document.all.reflex.style.backgroundColor="white";
                else if (document.getElementById)
		document.getElementById("reflex").style.backgroundColor="white";
                else if (document.layers)
                document.reflexns.document.reflexns_sub.document.bgColor="white";      	
	alert("Your response time is: " + responseTime + " seconds " + "n" + 
remark(responseTime));
		startPressed=false;
		bgChangeStarted=false;
	}
	else
	{
		if (!startPressed)
		{
			alert("press start first to start test");
		}
		else
		{       			clearTimeout(timerID);
			startPressed=false;             			alert("cheater! you pressed too 
early!");
		}               	}
}

var randMULTIPLIER=0x015a4e35;
var randINCREMENT=1;
var today=new Date();
var randSeed=today.getSeconds();
function randNumber()
{
	randSeed = (randMULTIPLIER * randSeed + randINCREMENT) % (1 << 31);
	return((randSeed >> 15) & 0x7fff) / 32767;
}

function startit()
{
	if(startPressed)
	{
		alert("Already started. Press stop to stop");
		return;
	}
	else
	{
		startPressed=true; 		timerID=setTimeout('startTest()', 
6000*randNumber());
	}
}
// --> </script>
<br>


<ilayer id="reflexns" width=135; height=135;><layer id="reflexns_sub" width=135; height=135; 
left=0 top=0 bgColor=yellow></layer></ilayer>

<form name="response">

<input type="button" value="  start  " onClick="startit()" style="font-weight:bold">
<input type="button" value="  stop  " onClick="stopTest()" style="font-weight:bold">
</form>

-----------------------------------------------------------------------------------
No-Right-Click
Back by popular demand ... a "No-Right-Click" script. Protect your valuable code from being lifted 
from your site! Place this code on a page, and people won't be able to right click to view your 
source code

<script language="JavaScript">

 <!--
// No rightclick script.
// Find more great scripts and applets at the JavaFile!
// http://www.javafile.com
// Do not delete this header!

var message="Sorry, we don't allow that on this site!."; // Put your message for the alert box 
between the quotes.

// Don't edit below!

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;
// --> 
</script>

---------------------------------------------------------------------------------









	



 

	






	








    
 
.