Version 4.0.0
Since 2008 years I have yet to receive a single spam on any email address protected by ELinks.
ELinks is Free, use it to protect your email addresses.
If you are a new domain name owner start taking measures now to prevent/reduce spam.
Don't even consider a "Temporary Under Construction" web page that contains a "mailto:" link that
doesn't implement some form of hiding your email address from Spambots.
The HTML "mailto:" link has become the most abused HTML tag ever used.
It is one of the main sources of data collection used by spammers in creating databases of email addresses to send spam.
Statistics suggest that close to 90% of all email sent over the internet is spam.
Bad HTML: <a href='mailto:info@example.com'>info@example.com</a> becomes <span class="elink" title="info"></span> which is seen as
Version 4.0.0
Updated: February 23, 2011
Updated: January 08, 2017
Updated: January 13, 2018
BackgroundGeneral
Spambots are used to collect e-mail addresses on the Internet to build mailing lists for sending unsolicited e-mail (aka: spam).
Spambots are web crawlers that can gather e-mail addresses from Web sites, newsgroups, special-interest
group (SIG) postings, and chat-room conversations. Since an e-mail address have a distinctive format, spambots are easy to write and implement.
While some will say that the only way to prevent spam is to not give your email address to anyone. Unfortunately this is not entirely true.
Once a spammer (aka: low life) becomes aware of your domain name they may start sending spam to commonly used user-names such as John@, Jane@ ..etc.
However, most spammers (aka: a low life lower than a snakes belly) use Spambots to build a database of legitimate email addresses.
The spambots collect email addresses by visiting websites and searching the text in your documents. If a website contains any
html <a> anchor tags that contain the "mailto:" link the spambot will extract (harvest) the address and add it to their database of
legitimate email addresses and start sending them spam.
Purpose
The purpose behind this script first and for most is to prevent spambots from acquiring email addresses contained in a webpage.
The second objective was to ensure that the script was simple and easy to implement without having to understand HTML code.
This also created an opportunity to contribute to the well being of the internet community by helping to reduce internet traffic (bandwidth)
and of course the reduction of spam.
You can contribute to the well being of the internet by taking steps to prevent spammers from
acquiring any email addresses in your web documents.
What's different about ELinks
If you search the internet looking for ways to obscure your email address you will get hundreds of links. Most of them use JavaScript in some
form or another to obscure an email address. All modern day browsers recognize and execute JavaScript code (unless the user
has it disabled, which I'll discuss next). JavaScript was designed for client side execution and is safe on legitimate websites.
ITI's ELinks script also uses JavaScript to display an email address to the visitor. Here are a few of the differences compared to other techniques.
You don't have to edit both the html and the script to add an email link.
Just add links to the HTML. Most editors allow you to add tags and their attributes without the need to manually edit the HTML code.
You can add an email link just as easily as you would have added a mailto: link
Has all the same features available in a "mailto:" link.
Does not contain any references to a "mailto:" link.
Automatically takes into account users with JavaScript disabled. The <noscript> tag is not required.
Uses the DOM (Document Object Model) to generate the visible email address after the page has been loaded.
There is no direct call to the JavaScript function that would suggest the html code is being modified to display an email link.
Even if a spambot scans the JavaScript file there are no references to email.
The "a" which is an abbreviation for "anchor" is the element.
An element when enclosed with < and > becomes an element tag, in this case an anchor tag.
"href" and "class" are attributes of the element. The value of the attribute is the part after the "=" sign between the quotes.
The attribute value/pairs are assigned to the element inside the elements opening tag.
The text (or mark-up) between the opening and closing tags is the elements innerHTML, in the above example, the words "Email me".
The ELinks parameters - value/pairs
All the parameters used to create a link are assigned to the "title" attribute of the element (almost all HTML elements include the "title" attribute).
The "title" attribute is normally used to display a "tool tip" and ELinks uses this "free form text field" to pass the link values to the script. To a spambot it appears as "tool tip" text.
eg. Place your mouse over this > word, which was created like this: <strong title="This is a tool tip">word</strong>.
ELinks Variable/Value paramaters are placed inside the quotes of the title attribute.
The variable name preceeds the value separated by a space and followed by a comma thus creating comma deliminated list of variable value pairs.
eg. title="variable value, variable value, variable value"
Variable Valueto the recipient's email address
cc a cc recipient's email address
bcc a blind copy recipient's email address
text or linktext the visible/clickable text (the innerHTML)
subject The text you want automatically placed into the subject line of the visitors email client.
body The text you want automatically placed into the body of the visitors email client.
class or css The ccs style sheet class name to apply to the link when it's converted to an email link.
tt tool tip value.
The ELinks variables are not case sensitive. 'teXT' is the same as 'text'.
ELinks value/pairs are used in the title attribute of the tag used to identify the "elink".
ELinks value/pairs must be separated by commas and enclosed within a single set of quotes assigned to the title attribute.
Do not use any quotes around the ELinks value/pairs.
If you require quotes around text for example in the subject line, body text or the innerHTML, use "<span class="elink" title="to John.Doe, text Contact "John""></span> and when converted appears as
The values for "to" and "cc" (ie. recipient email addresses) can be used without the variable names. ("bcc" is required to add a bcc recipient)
<span class="elink" title=" linkText Email Me, recipientA, recipientB, subject Text, bcc recipientC, recipientD " > [no script] </span>
"to" and "cc" are optional.
Elinks processes a value not preceded with a variable as an email recipient.
In the example, the first value found without a variable name is "recipientA" and is assigned to the 'to' variable as if it existed.
The second value "recipientB" is assigned to the 'cc' variable as if it existed.
The third value "recipientC" has been explicitly assigned to the 'bcc' variable.
Any value found without a variable after the first one is considered to be a 'cc' recipient so "recipientD" also becomes a 'cc' recipient.
Other than the "unassigned" recipients order discussed above, the order of the value/pairs does not matter.
All value/pairs or parameter values are optional.<span class="elink" title=" " ></span> displays absolutely nothing.
To summarize we now have:
<span class="elink" title="toname, text Email Me, ccname, bcc bccname, subject Subject Text, body Body Text, css classname" >[no script] </span>
Note: An elink without a recipient simply creates a clickable link. <span class="elink" title=" text=Click Me; "></span>
Comparing and converting an HTML mailto link to an ELinks link:<a href="mailto:info@example.com?cc=JoeBlow@example.com&subject=Service Enquiry">Email me</a>
Rename 'href=' to 'title=' and remove 'mailto:' (the word and the colon):
<a title="info@example.com?cc=JoeBlow@example.com&subject=Service Enquiry">Email me</a>
Replace the '@', 'dots' and '=' characters in the title value (originally the href value) with spaces:
<a title="info example com?cc JoeBlow example com&subject Service Enquiry">Email me</a>
Replace the '?' and '&' characters with commas:
<a title="info example com,cc JoeBlow example com,subject Service Enquiry">Email me</a>
Remove the innerHTML from between the anchor's opening and closing tags and add it as a parameter instead:
<a title="info example com, cc JoeBlow example com, subject Service Enquiry, text Email me"></a>
Change the <a> tag to a <span> tag (change 'a' to 'span' in both the opening and closing tags):
<spantitle="info example com, cc JoeBlow example com, subject Service Enquiry, text Email me"></span>
Add the class attribute and assign it a value known to the script so that it can be identified as an elink. (the default value is "elink")
<span class="elink" title="info example com, cc JoeBlow example com, subject Service Enquiry, text Email me"></span>
The variable "cc" is optional and therefore can also be removed. The converted ELink now looks like:
<span class="elink" title="info example com, JoeBlow example com, subject Service Enquiry, text Email me"></span>
And finally, if the website is the same domain name as the email recipients then the "short syntax" can be used and the domain portion can be removed.
<span class="elink" title="info, JoeBlow, subject Service Enquiry, text Email me"></span>
ELinks - The BasicsExample Notation
Throughout the examples the bad HTML links are shown in red and the ELinks links in green followed by what is seen by the visitor and a brief explanation.
Mouse over the link and you should see the converted code in the status bar at the bottom of your browser.
The examples use users in the "example.com" domain (eg info@example.com).
It is important to understand that the examples are written as if the web page is being accessed with "http://www.example.com" in the address bar.
Do not refer to the Source Code for "how to" information as it will lead to confusion. In many/most cases the code has been altered to display correctly on this page.
To accommodate users without JavaScript you could use a "Contact Us" form.
Although not necessary, you could add the <noscript> message in the
previous example to advise them of non-functionality (like menus).
In your ELinks innerHTML, add links to a "Contact Us" form. The innerHTML is the data between the <span> innerHTML </span> tags in this case.
In this case there is no need to tell them the email links are disabled because a link to a "Contact Us" form will be visible instead.
Remember if JavaScript is enabled neither the noscript message or the links to the "Contact Us" form will appear.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Your Page Title</title>
<link rel="StyleSheet" href="filenotes.css" type="text/css">
<script language="JavaScript" type="text/JavaScript" src="filenotes.js"></script>
<script type="text/JavaScript" src="ELinks.js"></script>
<style type="text/css">.elink{}</style>
</head>
<body onload="ELinks();">
<noscript>
<div style="border:1px solid Red;padding:25px;text-align: center"><em style="color:red">We have detected that you have JavaScript disabled.<br />
To gain the full benefit of our website you must Enable JavaScript.</em></div><br />
</noscript>
Hello World
<div align="center">
<span class="elink" title="Info, text Contact Us"> <a target="_blank" href='http://www.CanadianDomainRegistry.ca/contrib/ContactForm/index.php'>Contact Us</a> </span>
</div>
</body>
</html>
We have detected that you have JavaScript disabled.
To gain the full benefit of our website you must Enable JavaScript.
About the Contact Form:
Your welcome to use the contact form on your site. Click the "Contact Us" link above to see the form details and download it.
The Contact Form validation is done on both the client side and server side so it will function correctly whether or not javascript is enabled.
You could use the ContactForm in lieu of ELinks if you preferred to only allow your visitors to contact you via a form.
The Contact Form scripts are is written in "PHP" and your hosting server must have "PHP" installed (most do).
If your website is hosted by ITI , http://www.CanadianDomainRegistry.Ca you won't have any problems at all using these scripts.
If you really think it's necessary to show an email address to the visitor with disables JavaScript you could use some text along with a couple of images to display the address.
This technique uses ccs to insert an @ image before the subdomain and a dot image after the subdomain.
Of course the links aren't clickable and of course it won't display correctly in anything less than IE version 8.
To use CSS, in the HEAD section add the new class styles that contain a reference to the images.
The alternative is to use the <img> tag to display the @ and dots as shown in the body of the example.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Your Page Title</title>
<link rel="StyleSheet" href="filenotes.css" type="text/css">
<script language="JavaScript" type="text/JavaScript" src="filenotes.js"></script>
<script type="text/JavaScript" src="ELinks.js"></script>
<style type="text/css">
.elink{}
.elinkImage:before{content:url(elinkBefore.jpg);padding:1px;}
.elinkImage:after{content:url(elinkAfter.jpg);padding:1px;}
</style>
</head>
<body onload="ELinks();">
<noscript>
<div style="border:1px solid Red;padding:25px;text-align: center"><em style="color:red">Our Email addresses are protected by JavaScript to prevent spam.<br />
Enable JavaScript to use the email links on our site.
The email links are shown without the @ and dots.</em></div><br />
</noscript>
Hello World
<span class="elink" title="Info">Info <span class="elinkImage"> example </span> com</span>
With <img> tags:
<span class="elink" title="Info">Info<img src="elinkBefore.jpg">example<img src="elinkAfter.jpg">com</span>
</body>
</html>
Our Email addresses are protected by JavaScript to prevent spam.
Enable JavaScript to use the email links on our site.
In IE versions less than 8, the email addresses are shown without the @ and dots.
Hello World
Info example com << In compliant css browsers
Info example com << Microsoft hasn't been able to find the funds in their Billion dollar annual income to make their browser css compliant until IE version 8.
With <img> tags:
Infoexamplecom << This should work in all browsers. But what if the visitor also has his download images turned off? I guess he'll just have to figure it out.
Get The Files...ELinks.jsELinks.js is the only file required to use ELinks in your webpages.
Create a new file in a "plain text editor" such as Notepad (not MS Word) and name it ELinks.js, then copy&paste in this code.
Click here to retrieve and view the current Elinks.js file on ITI's servers
Add the link but hide the text
If you want to acknowledge your support but don't want the link to appear at the bottom of the page,
change "display:block;" to "display:none;" in the first line.
This will allow robots (the good ones) to document the source location of ELinks thus giving credit to ITI and the CanadainDomainRegistry.ca
Turn On/Off the Acknowledgement link created by Elinks
By default, Elinks also generates the above Acknowledgement link when the page loads but is only visible to humans and not robots. This is not the prefered way of giving credit.
If you add the code above, ELinks will not generate the link a second time as long as you have not changed the "div id value". ie. Do not change id="ELinksAck" in the first line.
If the Acknowledgement does appear twice or you do not want it to appear at all, you can turn off
the link by editing the ELinks.js file and changing the Acknowledgement Boolean from ",ELinksAck:true" to ",ELinksAck:false"
Make a Donation
If you are using ELinks or any other ITI free software please consider making a donation. Developing software and utilities involves an
extraordinary amount of time and effort which takes away from the things that create income.
Contributions make development of this type of software possible and can be your way of saying thank you which will encourage ITI to add more.
Donate Here
Compatability, Updates, Notes and Comments
ELinks had been tested in Firefox, Opera and Microsoft Internet Explorer (IE) versions 5.1* through 8 (I don't expect any issues with IE 9).
UpdatesVersion 2 - Extended functionalityVersion 2 released July 2010.
Due to the success of Version 1, Version 2 was expanded to include additional functionality.
Version 2 does not contain fixes to version 1 as it did not have any errors.
Code Cleanliness - faster, cleaner and more efficient resulting better performance.
Revised syntax to reflect good coding practices
Changed/simplified input method to make the ELink title value appear more like sentence.
Changed the configuration paramater names to be easier to understand their purpose
Compressed code for faster transmission/loading
Changed some default behavior to better reflect how a link should appear and behave (eg. bcc recipients must now be specifically assigned)
All attributes found in the ELink tag are removed and reassigned to the converted Elink anchor tag, including event handlers. eg. mouse events
Tool tip text can be added as a paramater to create a new title attribute in the converted link
A separate installer was created and is available to take the guess work out of creating ELinks ELinks Installer
Version 2.0.1 - Minor bug fixVersion 2.0.1 released December 2010.
If you are currently running ELinks successfully there is no reason to upgrade although upgrading is never a bad idea.
To upgrade simply replace your existing ELinks.js file with this one.
Modified "for" loop statements to prevent conflicts with scripts using other javascript libraries.
Removed the requirement to add "onLoad()" in the body tag or in any javascript initialization script.
Modified script to convert elinks in IE 5.1*.
Corrected the implimentation of the "for" loop in Version 2.0.1 (version 2.0.1 inadvertently disabled conversion of the event handlers)
Updated the installation instructions (this page)
Removed version 1 compatability
* As of version 3.0.0, links in IE 5.1 are converted but any custom css markup or event handlers you may have added are ignored.
This limitation is fairly minor since IE 5.1 is pretty much obsolete.
Version 4.0.0 - Update
Updated depricated Attribute "nodeValue" to "value".
NotesPage Content seems to move up and down while the page is loading.
This may occur if the email link is on a line by itself and/or not inside a set of tags that allocates the space/line while the page is rendering.
To prevent this create a place holder for the email link with a non-breaking space " " or some other text such as "enable javascript to see email address".
The " " (or text) will get replaced with the link after the page has finished loading.
You could also use multiple non-breaking spaces (equal to the length of the email address) if the link is appearing in a paragraph of text.
This may only be an issue if the link appears at or near the top of the page. When a visitor has to scroll down to see the email
address the link will have already been replaced and the content will be where it is supposed to be.
<span class="elink" title="info, text Email me"> </span>Comments & Feedback
Please send any comments and feedback to .
Remember you can also make a donation