Hiding Your Email Address from Spammers and Bots

Samples of JavaScript code.

Moderator: Moderators

Hiding Your Email Address from Spammers and Bots

Postby pentapenguin on Sat May 14, 2005 4:32 pm

Hello.

Having a "Email Me" type link on your website is always a good idea so people can easily contact you. Unfortunately, due to spammers and bots, putting your email on your webpage is not a good idea unless you enjoy getting your inbox swamped with junk! However, with a little JavaScript, you can safely protect your email address from spammers while still letting your guests email you with their own email program instead of a bland "contact us" type form.
Well, let's get started!
This script should be pretty self-explanatory, but we'll go over it in detail in just a minute.

Code: Select all
<script language="JavaScript" type="text/javascript">
<!--hide code from old browsers
// Change this variable to your own site's domain name
var domain = "yourdomain.com";
var at = "@";

function email_me(username)
{
   var complete_email = "mailto:" + username + at + domain;
   window.status = complete_email;
   location.href = complete_email;
}

function sb_write_email(username)
{
   var complete_email = "mailto:" + username + at + domain;
   window.status = complete_email;
}

function sb_clear_email()
{
   window.status = "";
}
//-->
</script>

Some optional additonal code we'll cover in a moment:
Code: Select all
<noscript>
<img src="images/myemail.jpg" alt="My Email" title="My Email" />
</noscript>

Now let's go through it now line by line:
Code: Select all
var domain = "yourdomain.com";

All you need to do to this script to use it in your website is to change the domain name to your domain name.
Code: Select all
var at = "@";

This variable stores the @ sign for later use. (Why in just a minute.)
Code: Select all
function email_me(username)

This is the start of the main function.
It takes a single argument -- the username that comes before the @ symbol (i.e. if your email is john@doecom you would enter john).
Code: Select all
var complete_email = "mailto:" + username + at + domain;

This variable stores the complete email and adds mailto: at the beginning so the browser knows that it's an email link and to open the default email program.
Why store all of the email parts separately?
Remember, spam bots are looking for x@somewherecom so breaking up the email address into its three parts (the username, the @ symbol, and the domain name) will make the email invisible to bots.
Code: Select all
window.status = complete_email;

This line tells the browser to put the email in the status bar, and make it look like a regular email link.
Code: Select all
location.href = complete_email;

This is the line that does the real work.
It tells the browser to open the default email program.
Code: Select all
function sb_write_email(username)

This function is very similar to the email_me() function and takes the same argument so I'm not going to explain it again.
What does this function do?
It writes your email to the status bar like a normal email link so people know to click on it to email you.
You may be wondering, "Didn't we do that in the email_me() function above?"
Technically, yes, we did.
However, the line in email_me() only writes the email to the status bar when you click on it.
You have to write the email to the status bar when you put your mouse over it which this function does.
Code: Select all
function sb_clear_email()
{
   window.status = "";
}

This function is very simple.
All it does is to clear the status bar after your mouse moves away from the email link.
Why?
Whatever you write to the status bar stays there until you overwrite it with something else.

Code: Select all
<noscript>
<img src="images/myemail.jpg" alt="My Email" title="My Email" />
</noscript>

This part of the script is optional, but recommened.
If your guest doesn't have JavaScript (or has it turned off), this tells the browser to instead display an image that has your email (you need to create this) so your users still have a way to contact you. (Bots can't read images. ;) )
Now that we've gone over how the script works, here's how you would use it.
Code: Select all
<a href="javascript:void();" onClick="email_me('myemail')" onMouseOver="sb_write_email('myemail');return true" onMouseOut="sb_clear_email();return true">Email Me!</a>

All you need to change is the myemail value to your email username (the part before the @ symbol).

Now we'll break apart this code.
The href attribute is requried, but we don't want a regular email link, so we put a dummy JavaScript value there (void() does exactly what is says -- nothing!).
The onClick event handler uses the email_me function and that is called when you click on the link.
The onMouseOver event handler writes the email to the status bar when you move your mouse over the status bar and likewise, the onMouseOut event handler removes your email from the status bar.
You have to use return true; on these two event handlers or you'll get an error.
This script was tested on Internet Explorer 6, Firefox 1.0.x, and Opera 8.

Well, that's all for this tutorial; hope you learned something interesting and useful! :)
User avatar
pentapenguin
Moderator
Moderator
 
Posts: 1466
Joined: Tue Sep 14, 2004 4:15 pm
Location: Georgia, USA

Postby Mikey Bee on Fri Jul 28, 2006 4:09 pm

Can I just say a massive thank you. I run a number of different websites and since putting your code into them and changing the old email addresses to fresh ones, I have not had a single spam email!

You are a God amongst men, sir :)
Mikey Bee
Registered User
Registered User
 
Posts: 61
Joined: Tue Jan 31, 2006 10:54 am


Return to JavaScript Tutorials

Who is online

Users browsing this forum: No registered users and 1 guest