Obscuring Your e-mail
Address with JavaScript

This is not meant to be an exhaustive tutorial, in fact, if you don't already know how to program with JavaScript you probably won't be able to get this to work for you. If you still want to try your hand at it, get a good introductory book to JavaScript and read on.

This technique relies on the fact that SPAMbots read web pages as text, extracting anything that looks like an e-mail address as they go. Simply using JavaScript to encode an address may not be effective since the bots may be smart enough to execute any JavaScript code that simply generates an address on screen or in a link. The trick is to put the code somewhere where it will not be executed without action by a real user. A little-used attribute of hyperlinks allows code to be triggered when a link is clicked. By pointing the hyperlink at a non-existent dummy target we can use the onclick attribute to generate the mailto: statement and launch the e-mail client. But first, the function that generates the e-mail address:

function unHide( num ) {
   var usernames = new Array( "\144\165\155\155\171" );
   var domains = new Array( "\164\145\163\164\56\143\157\155" );

   num = num ? num : 0;
   document.location.href = "mailto:" + unescape( usernames[ num ] ) + "@" + unescape( domains[ num ] );
}

This function encodes the username and domain as "escaped" strings, where each character is converted to a backslash followed by its ASCII value. Note that the strings are stored in an array so that one function can handle multiple obscured email addresses. If you are sure you will never have more than one address on your page you can dispense with the arrays if you wish. After ensuring that the num parameter is actually a number, the JavaScript built-in unescape function converts the strings into real characters and the mailto: is executed.

Now, in your text where you want the user to be able to click a link that launches their e-mail client with your real address, add the following hyperlink:

<a href="dummy.html" onClick="javascript:unHide(0);return false;">Email me!</a>

This will display a link that reads "Email me!" which executes the unHide() function when the user clicks on it. The "dummy.html" URL doesn't abolutely need to exist since it will normally never be executed, but you can also put a message in here telling the user that they must turn JavaScript on in their browser to be able to send you mail. The user will only be directed to this page if JavaScript is turned off, otherwise the "onClick" parameter overrides it.

In most cases it is best to put the function declaration inside the <HEAD> tags so it is available as soon as the page starts to load. Note that the unHide() function requires at least JavaScript version 1.1 and it will fail with a 1.0 browser. To avoid problems you can rely on the fact that JavaScript 1.0 can't pass parameters to functions. Simply create a second version of unHide() that takes no parameters, the 1.0 browser will ignore the parameter in the onClick="javascript:unHide(0) attribute and call the alternate function instead. Putting it all together:

<HEAD>
<TITLE>My Web Page</TITLE>

<SCRIPT>
function unHide() {
   alert( "Sorry, Javascript 1.1 required" );
}
</SCRIPT>

<SCRIPT language="JavaScript1.1">

</SCRIPT>
</HEAD>

Good luck!

Obscuring Your e-mail Address with JavaScript

Obscuring Your e-mail
Address with JavaScript