ITI Logo

Protect Your Email Address with ITI's ELinks ©

Version 3.0.0
After 2 years I have yet to receive a single spam on any email address protected by ELinks.
New... An ELinks Installer is now available to verify and simplify conversion.
ELinks Installer



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.


ITI's ELinks © is a simple effective alternative to the "mailto:" link.
ELinks provides all the same functionality used in a "mailto:" link but does not create any readable email address in the source code of the document.
Since email addresses don't appear to be present the Spambots don't find any useful information.

Bad HTML: <a href='mailto:info@example.com'>info@example.com</a> becomes <span class="elink" title="info"></span> which is seen as

Version 3.0.0
Last updated: February 23, 2011

Background General

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.



Syntax HTML Terminology - Elements and Tags

Understanding the parts, an element vs a tag.

<a href="mailto:info@example.com" class="mystyle">Email me</a>    <openingTag attributes>innerHTML</closingTag>
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 Value
to 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 &quot;
<span class="elink" title="to John.Doe, text Contact &quot;John&quot;"></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>

Short Syntax vs. Long Syntax
Short Syntax vs. Long Syntax
Throughout this document I refer to either a "short syntax" or "long syntax".

  • The "short syntax" is used when the email address you're protecting has the same domain name as the webpage's address.
    If the website is accessed via the url http://www.example.com then ELinks only needs to know the "user name" portion of the email address.
    So <span class="elink" title="Jane"></span> would create:

  • The "long syntax" is needed when the email address you're protecting has a different domain name than the webpage's address.
    If the website is accessed via the url http://www.example.com but the email address is Jane.Doe@Microsoft.com, then ELinks needs to know all the parts.
    So <span class="elink" title="Jane.Doe Microsoft com"></span> is required to create:

  • The "long syntax" requires the entire email address with the "@" and "." (dots) replaced with spaces.

  • Although all parts of the email address are present in the long syntax it still only appears as a "tool tip" to a spambot.

Note: Dots (.) in the "user name" portion of an email address must not be replaced with spaces and must be present to create the correct link.

Step by Step Convertion of an HTML mailto: link

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):
<span title="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 Basics Example 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.

Example #1 - The bare minimum
Example #1

The Source Code of a typical webpage with a bit of markup would look something like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
   <title>Your Page Title</title>
</head>
<body>
   Hello World
   <a href='mailto:info@example.com'>Email me</a>
</body>
</html>

Add the ELinks script information (blue) to the HEAD section of your webpages and correct the bad link (now shown in green).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
   <title>Your Page Title</title>
   <script type="text/JavaScript" src="ELinks.js"></script>
   <style type="text/css">.elink{}</style>

</head>
<body>
   Hello World
   <span class="elink" title="info, text Email me"></span>
</body>
</html>

Both the web pages display exactly the same thing but the Source Code of the ELinks page does not indicate any kind of email link.
Example #1 demonstrates how simple it is to add a protected email address to your website.

Hello World

The Script. <script type="text/JavaScript" src="ELinks.js"></script>
src="ELinks.js" indicates that the script can be found in the root directory of www.example.com.
I suggest you create a separate directory for the ELinks source files so they are separate from your site files.
For example, create a new directory called "ELinks" and copy all the ELinks files to this new directory. The source location would then be src="ELinks/ELinks.js".
You could also use the full path to the src file: src="http://www.example.com/ELinks/ELinks.js"
(Do I really need to mention that "example.com" has to be replaced with your domain name!)


The Style. <style type="text/css">.elink{}</style>
Even though the style .elink{} doesn't have any rules you should at least define it, either here or in your style sheet. This will avoid any css errors or warning that some browsers may generate/report. The style rules (if any) apply to the text between the span tags as normal but is only apparent (visible) if the visitor has accessed the page with JavaScript disabled.

Example #2 - Adding a cc recipient and text to the subject line (short syntax)
Example #2

Assumes the web address is http://www.example.com:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
   <title>Your Page Title</title>
</head>
<body>
Hello World<br />
<a href="mailto:info@example.com">info@example.com</a><br />
<a href="mailto:Support@example.com?cc=joe.blow@example.com&subject=Support%20Request">Get Support</a><br />
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
   <title>Your Page Title</title>
   <script type="text/JavaScript" src="ELinks.js"></script>
   <style type="text/css">.elink{}</style>

</head>
<body>
Hello World<br />
<span class="elink" title="info"></span><br />
<span class="elink" title="Support, text Get Support, joe.blow, subject Support Request"></span><br />
</body>
</html>

Again both web pages display exactly the same thing:

Hello World



In the first link, no linkText was used (ie text=value) so ELinks uses the 'to' recipients email address as the linkText.

In the second link neither the 'to=' or 'cc=' variable name are used, therefore ELinks assigns the first 'unassigned variable value' (Support) to the "to" recipient and the second 'unassigned variable value' (joe.blow) to the "cc" recipient.

In examples #1 and #2 the users email address belongs to the same domain name as the website so you don't need anything more than the username (ie the part before the '@'). ELinks will append the website's domain name to the username to create the link. This is what I refer to as the "short syntax" since the domain portion of the email address is not required.

Example #3 - Adding links to a recipient in a different Domain (long syntax)
Example #3

For this example the webpage is accessed with the url http://www.example.com and contains email links to Charlie@example.biz and Sally@example.info with additional parameters.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
   <title>Your Page Title</title>
</head>
<body>
Hello World<br />
<a href="mailto:Charlie@example.biz">Charlie@example.biz</a><br />
<a href="mailto:Sally@example.info?cc=joe.blow@example.com&subject=Sally Support%20Request">Get Support from Sally</a><br />
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
   <title>Your Page Title</title>
   <script type="text/JavaScript" src="ELinks.js"></script>
   <style type="text/css">.elink{}</style>

</head>
<body>
Hello World<br />
<span class="elink" title="Charlie example biz"></span><br />
<span class="elink" title="Sally example info, text Get Support from Sally, joe.blow, subject Sally Support Request"></span><br />
</body>
</html>

Hello World



Since Charlie and Sally are users at another domain we need to include their domain names in the parameter list (long syntax).
This should be easy to remember - simply replace the '@' and 'dots' with spaces in their email addresses.
eg. Sally@example.info becomes: title="Sally example info"

The only time you should see a "dot" is when it is part of the username, as in "joe.blow". Also, since joe.blow's domain is example.com the short syntax is used.

If most of the links on the webpage refer to users at another domain, consider changing the DomainDefault to that other domain. See DomainDefault described later.

Example #4 - Cascading Style Sheets - adding class and/or the style attribute.
Example #4

To demonstrate how to add css style I've created the class called "elinkRed" and added it to the style element in the head section.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
   <title>Your Page Title</title>
   <script type="text/JavaScript" src="ELinks.js"></script>
   <style type="text/css">
     .elink{}
     .elinkRed:link, .elinkRed:visited {color: red; text-decoration: none;}
   </style>

</head>
<body>
   Hello World
   This is a link without any style applied:   <span class="elink" title=" Info, LinkText Contact Us "></span>
   The same link with the class elinkRed added:   <span class="elink" title=" Info, text Contact Us, css elinkRed "></span>
   And the same link with additional inline style rules:   <span class="elink" title=" Info, LinkText Contact Us, css elinkRed " style="border:1px solid orange;"></span>
</body>
</html>

Hello World
This is a link without any style applied:  
The same link with the class elinkRed applied:  
The same link with additional inline style rules:  

In the first link the browser's default behavior/style for links is applied.

Adding the "class" or "css" variable to your list of parameters allows you to have a different class for every link on the page.
In the second link which has "css elinkRed" added to the "title" attribute, the browser renders the link according to the class rules created for the class "elinkRed".

Adding inline style rules. In the third link the "style" attribute and value have been added to the "span" element.
You can add inline style rules just as you would in any HTML tag. Elinks will read the style information and apply it to the converted link (anchor tag).

Note: The "style" is an attribute of the <span> tag and is not contained within the value of the quoted "title" attribute. See Attributes and Events in Example #6.

Applying the same style to every link:
Instead of adding a "css" value to every link you can assign a class name to the LinkClass global variable (described later).

When a style is assigned to the global LinkClass variable you can still use the "css" variable in individual links to over ride the global default class. The class value in the link will take precedence over the LinkClass value as is the case when any tag includes the class attribute.

If you have LinkClass set but want a link to use the default browser style and behavior, add the css variable and assign it the value default.
eg. <span class="elink" title=" Info, LinkText Contact Us, css default "></span>
The key word default instructs ELinks not to add the class attribute to the converted link.


Example #5 - Adding a "title" attribute to the converted elink.
Example #5

The "title" attribute also referred to as a "tool tip" can also be added to the converted ELink. ( "tool tip" being the text that appears when your mouse is over the link )

The ELinks paramater "tt" is an acronym for "tool tip" and can be assigned 2 different "value types":

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
   <title>Your Page Title</title>
   <script type="text/JavaScript" src="ELinks.js"></script>
   <style type="text/css">.elink{}</style>

</head>
<body>
Hello World<br />
1. <span class="elink" title="Info"></span><br />
2. <span class="elink" title="Info, tt false"></span> (no tool tip)<br />
3. <span class="elink" title="Info, tt true"></span><br />
4. <span class="elink" title="Info, tt Contact Us"></span><br />
5. <span class="elink" title="Info, tt Send Us Your Comments, text Email Us"></span><br />
</body>
</html>

Hello World
1.
2. (no tool tip)
3.
4.
5.

Mouse over each of the above links.
These link examples assumes the Global default "LinkTitle" value is "true". (Refer to the Advance Settings - Global Variables)

  1. In Link 1, the paramater "tt" is not set.
    In this case the Global LinkTitle value would apply and since it has a value of true this does the same as Line 3.
  2. In Link 2, tt has a value of "false".
    This link will not display any tool tip, regardless of the default value.
  3. In Link 3, tt has a value of "true".
    This tool tip will display the "to:" recipients email address, regardless of the default value.
  4. In Link 4, the tt value contains the text "Contact Us".
    This tool tip will display "Contact Us"
  5. In Link 5, the tt value contains the text "Send Us Your Comments" and the text (innerHTML) is set to show the words "Email Us".
Essentially "tt" becomes the "title" attribute of the converted link.

Example #6 - Adding Event attributes.
Example #6

ELinks recognizes any event attributes added to the ELink tag and adds them to the converted link.
This example uses the mouseOver and mouseOut event handlers to change the appearance of the link while the onClick event calls a javascript function to display an alert() message.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
   <title>Your Page Title</title>
   <script type="text/JavaScript" src="ELinks.js"></script>
   <script type="text/JavaScript">
      /* <![CDATA[ */
      function mClick(){ alert("You Clicked on me but I'm not going to do anything."); return false;}
      /* ]]> */
   </script>
   <style type="text/css">
     .elink{}
   </style>

</head>
<body>
   Hello World
   <span class="elink" title="Info, text Contact Us" onmouseover="this.style.fontSize='xx-large'" onmouseout="this.style.fontSize=''" onclick="return mClick()"></span>
</body>
</html>

Hello World


Mouse over and out of the link and then again to click on it.

You can add inline attributes and event handlers just as you would in any HTML element.

Notice the "attributes" and/or "event handlers" are added to the "span" element, and not as ELink value/pair paramaters in the "title" attribute.
Refer to Example #4 on how to add a different "class" attribute value.



Advanced Settings - The Global Variables ELinks Default Variables and Values
The Global Variables

All of ELinks "Global Variables" have a "Default value" which you can modify to suit your site and/or preferences.
The global variables:

Variable Name Type DescriptionDefault Value
DomainDefault String ELinks will use this domain name instead of the website URL domain""
DomainHosts Array A list of host names to exclude from the URL["www"]
LinkElement String The HTML element used for ELinks"span"
LinkClass String The Class name used to identify ELinks"elink"
LinkStyle String A CSS class style to assign to the converted link""
LinkTitle Boolean or String Used to add the "title" attribute (ie tool tip text) to the converted linktrue

Value Type Format:

To modify ELinks default settings:

The changes made in the "HEAD" section of the web page only affect that page allowing for customization on a page specific basis.

The changes in the "HEAD" section must be after the script has been loaded. ie. after <script ... src=ELinks.js></script>

If you have preferences that apply to the majority of your pages edit the default value in the ELinks.js file, then apply page specific changes in the HEAD section of any page that you want to over ride the global default value on.
If you change the Default values in the ELinks.js file after you have already created links in other parts of your website be sure to check them.

Editing the Global Variables in the ELinks.js File
ELinks.js

Open the ELinks.js file in your HTML editor or in a "plain text" "text" editor (not MS Word). The default Variable/Values are located at the top of the file and appear as follows.

/*
ITI Internetworking Technologies Inc.
http://www.CanadianDomainRegistry.
ELinks Version 3.0.0
*/
var ELinks,ELinkO;if(typeof ELinks==="undefined"){ELinks=function(){this.obj={
/* .......... ELinks Default Variable:Values .......... */
/* String */
DomainDefault:""
/* Array */
,DomainHosts:["www"]
/* String */
,LinkElement:"span"
/* String */
,LinkClass:"elink"
/* String */
,LinkStyle:""
/* Boolean or String */
,LinkTitle:true
/* .......... End Of Default Variable:Values .......... */
/* .......... Elinks Acknowledgement .......... */
/* Boolean */
,ELinksAck:true
/* String */
,ELinksAckColor:"navy"
/* String */
,ELinksAckSize:".9em"
/* .......... These apply only if you are using the ELinks Installer .......... */
/* Boolean */
,Installer:false
/* String */
,Language:"en"
/* Registration key */
,rKey:""
/* String */
,ELinksVersion:"3.0.0"};
... the rest of the code ...

The line above the variable name indicates what "type" of value the variable requires.
/* String */ The value is text enclosed in double quotes. eg. "some value"
/* Array */ The value is a comma deliminated list of text enclosed in quotes inside square brackets. eg. ["value1","value2",...]
/* Boolean */ The value is either true or false (not in quotes)
Do not add any markup after the variable names or values.
All variables must have a value even if it's just an empty string.
eg. "" 2 double quotes with nothing in between, or 2 square brackets [] for an array with no values and Booleans must be explicitly set to either true or false.

There is a colon (:) between the variable name and its value. Do not remove the colon.
Create a backup of the ELinks.js file before you start editing. An incorrect value or setting could cause ELinks to silently fail without providing any indication as to why.
Do not change or alter the format, edit only the values between the quotes and do not add any extra punctuation (except for the commas needed to separate array values).

Editing in the HEAD Section of your web page
HEAD Section

Open your web page in an HTML editor or in a "plain text" "text" editor (not MS Word).
Use JSON (Java Script Object Notation) syntax to add or modify a global variable in the head section of the web page. This is accomplished by passing the variable names and values to the ELinks function as parameters eg. ELinks(paramater)

To pass in a variable/value pair in JSON syntax it must be enclosed in an set of braces { } with the variable and value separated by a colon : , eg. { variable : value } .
The "value format" must be entered according to its "value type" as indicated for editing the ELinks.js file above. ie. strings in quotes, etc..

The variables can set individually on multiple lines (this is actually multiple individual calls to ELinks() but showing it on separate lines is clearer and easier to read)

ELinks ( { variable : value } ) ;
ELinks ( { variable : value } ) ;
ELinks ( { variable : value } ) ;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
   <title>Your Page Title</title>
   <script type="text/JavaScript" src="ELinks.js"></script>
   <script type="text/JavaScript">
      /* <![CDATA[ */
      ELinks({DomainDefault:"examlpe com"});
      ELinks({DomainHosts:["www","server"]});
      /* ]]> */
   </script>
   <style type="text/css"> .elink{} </style>
</head>
<body>
   Hello World
   ....
</body>
</html>

Or on a single line (single call) with the value/pairs separated by commas , eg. { variable : value , variable : value } :

ELinks ( { variable : value , variable : value , variable : value } ) ;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
   <title>Your Page Title</title>
   <script type="text/JavaScript" src="ELinks.js"></script>
   <script type="text/JavaScript">
      /* <![CDATA[ */
      ELinks({DomainDefault:"examlpe com", DomainHosts:["www","server"]});
      /* ]]> */
   </script>
   <style type="text/css"> .elink{} </style>
</head>
<body>
   Hello World
   ....
</body>
</html>

Remember the Variable and its Value are seperated by a colon :, and the Varaible:Value pairs are seperated by commas ,

DomainDefault
{ DomainDefault : "" }

Setting the DomainDefault to a Specific Domain Name.

The default behavior was intended to be quick and easy to setup and start using. After simply adding the source files to the HEAD of your document you can create spambot safe links. However, there are a few reasons why you might want to specify a Domain Default Name:

  1. Most of the links you are creating link to another domain name and you want to use the "short syntax".
  2. You don't want to worry about a lot of different "Host Names".
  3. On a very large web page to speed up processing of the links.
  4. You want the Domain name part of the email address to contain capital letters for easier readability.
Item 1: Allows you to use the "short syntax" which is a little quicker and less typing that translates in to being less prone to errors.
Item 2: Since the domain name is specifically set the DomainHosts list is ignored.
Item 3: Processing is a little quicker because checking DomainHosts and DomainAlias isn't required. Even if they have values ELinks skips over them.
Item 4: A little control over formatting. <span class="elink" title="Info"></span> appears as as opposed to

{ DomainDefault : "CanadianDomainRegistry Ca" };

DomainHosts ( Host Names such as www., webmail., services. etc. )
{ DomainHosts : ["www"] }

Host names such as the commonly used "www" that precedes the domain name must be excluded to properly construct the email addresses.

The DomainHosts variable is an array (list) of host names that ELinks will check and remove before converting the link.

Add all host names used to access your site to the DomainHosts array.
eg. http://service.contracts.example.com contains two host names "service" and "contracts" that need to be added to the DomainHosts array.

You may find it more convenient/useful to add the host names directly to the ELinks.js file.
Adding host names to the file after you have already created links elsewhere in your site does not affect the links you have previously created.
Understanding Host Names
A brief discussion of "Host Names".

To understand the difference between a "host name", a "subdomain" and a "domain name", consider the URL: http://www.example.com

The "domain" in this case is "com" which stands for "commercial"
The "subdomain" is "example.com" because "example" is a subdomain of the "com" domain.
The "host name" is "www" which stand for "World Wide Web" and is the part that precedes the "subdomain".

A commonly misused term is "domain name" since in most cases we are actually referring to the "subdomain". In the context of this document I also refer to the subdomain as the domain name to avoid confusion. I also refer to the "com" part as the "domain extension" which I'm sure would cause confusion if I referred to it as the "domain".

Host names have several different purposes. First they can give you an idea as to what the site might contain.
http://www.example.com An ordinary website.
http://Webmail.example.com Probably the login page to the users Webmail interface.
http://Contracts.example.com Possibly a site that contains the organizations contract documents.

With different host names, domain owners can create different web sites for different and/or specific purposes. They do not have to be at the same location or even on the same servers. The 3 examples may be on 3 different servers located on 3 different Continents.
If the host name is not removed, <span class="elink" title="info"></span> would display : which is not the correct address for the link.
You can however get around this by simply using the "long syntax" : <span class="elink" title="info example com"></span> which displays it correctly :

Since using the "short syntax" is the preferred method you need to tell ELinks which Host Names are being used in the address used to access the web site.

Just add the additional host names to the DomainHosts array:


{ DomainHosts : ["www","webmail","service","contracts"] }

LinkElement
{ LinkElement : "span" }

The LinkElement needs to be assigned the name of the HTML tag you are using to create the elinks. The default element is the "span" tag.
ELinks uses the DOM to locate and convert this tag to links only if it has a class value equal to the value assigned to the LinkClass variable (discussed next).

The HTML element you choose must be one that requires a closing tag. (do not use any wild cards such as "*") You can even use the anchor tag <a> but I don't recommend it.

The default "display style" of the tag you choose should be "inline".
eg. A <div> tag's display style is "block" as opposed to a <span> tag which is "inline".

If you are going to use the same element throughout your web site, change the LinkElement default value in ELinks.js, otherwise you could use a different element in each webpage by re-assigning its value in the HEAD section of each page.

The <span> tag is probably the most appropriate element but I have not bothered to test all possiblities.

{ LinkElement : "span" }

LinkClass
{ LinkClass : "elink" }

This is the "class" attribute value of the LinkElement used to identify an ELink. eg. <span class="elink" title="username">

ELinks first creates an array of all the tags that have the LinkElement value and then converts the ones that have class value equal to the "LinkClass" value.

If you are going to use a class name other than "elink" throughout your web site, change the LinkClass default value in ELinks.js, otherwise you could use a different class name in each webpage by re-assigning its value in the HEAD section of each page.

{ LinkClass : "elink" }

LinkStyle (CSS)
{ LinkStyle : "" }

A "Cascading Style Sheet" value.

If your website design incorporates a specific CSS class/style you want applied to your links you can add the style to all your ELinks by assigning the class name to the "LinkStyle" variable.

The css rule will be applied to all links except those that have a specific class applied.
Refer to example #4 on how to over ride this value and apply specific styles to individual links.

Leave it blank if you want the default browser behavior/colors used when a link is clicked. If assigned a value the style should exist in your style sheet even if it does not have any style rules.

{ LinkStyle : "cssRule" }

LinkTitle
{ LinkTitle : true }

The LinkTitle allows you to add the title attribute to the converted links. Since the LinkElement uses the title attribute to store the link data it cannot be used to display a "tool tip" until the link has been converted by ELinks.

This variable allows you to add a default title attribute to the converted links. There are 3 options:

You can also use the "tt" paramater for adding the title attribute to individual links which over rides this value as demonstrated in Example #5.
A Boolean is a value of true or false and not inside quotes. Any other value is considered a String and must be enclosed in quotes.

{ LinkTitle : true }



Dealing with Disabled JavaScript - <noscript> HTML <noscript> tag

The <noscript> tag is used to output information when JavaScript has been disabled. If you choose, you can provide a link to another webpage specifically designed to display content in a non-JavaScript enabled browser or just display an "Informative Message".

With ELinks adding a message is accomplished by simply adding the <noscript> content (not the tags, just the content) between the <span> tags used to create the email link. Since ELinks replaces the content between the <span> with the visible email link the noscript content is only visible if the visitor has JavaScript disabled.

A typical <noscript> message
<noscript>

Although there is no need to add <noscript> tags it might be a good idea (depending on your site) to add one at or near the top of the web page to inform the visitor that the email links are disabled in addition to other functionality such as navigation menu's etc..

<!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">Our Email addresses are protected by JavaScript to prevent spam.<br />
Enable JavaScript to use the email links on our site.</em></div><br />
</noscript>

   Hello World
</body>
</html>



As it appears to a visitor with JavaScript disabled.

  

Our Email addresses are protected by JavaScript to prevent spam.
   Enable JavaScript to use the email links on our site.


     Hello World

<noscript> with a "Contact Us" form
Contact Us

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>


As it appears to a visitor with JavaScript disabled.

  

We have detected that you have JavaScript disabled.
   To gain the full benefit of our website you must Enable JavaScript.



   Hello World
Contact Us

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.

<noscript> with css
<noscript> with css

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>


As it appears to a visitor with JavaScript disabled.

  

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.js

   ELinks.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.

ELinks.js
Click here to retrieve and view the current Elinks.js file on ITI's servers

Installer.js

   Installer.js is an optional script used to find email address as well as 'mailto' links and proposes the ELinks version of the mailto link.
   It also checks and validates the ELinks you create to ensure there are no input errors. The Installer requires a registration key Installer.
   Create a new file in a "plain text editor" such as Notepad (not MS Word) and name it Installer.js, then copy&paste in this code.

Installer.js
Click here to retrieve and view the current Installer.js file on ITI's servers

ELinks.zip

   The source files are in .zip format and can be downloaded from the CanadianDomainRegistry.ca website here:ELinks.zip

The ELinks.zip file contains these files
"Contact Us" Form Files

   A "Contact Us" Form that can be used with ELinks as discussed in the <noscript> section or in lieu of ELinks altogether.

Contact Us
The "Contact Us" Form is described and available as a separate download here: Contact Us Form

The .jpg Images
eLinkBefore.jpg & eLinkAfter.jpg   Right-click over the image and select "Save [Target or Link or Picture or Image] As..."
eLinkBefore.jpg <>       eLinkAfter.jpg  <>




Show your Support

You can help prevent spam by advertising your support of ELinks to others in a number of different ways.

Support Methods
The Best way to acknowledge your support of the ELinks project and its developer is to add a link to the CanadainDomainRegistry.ca website.

Show a link at the bottom of your page
  • Click inside the box and use "Ctrl + A" to select all the text.
  • Right click over the highlighted area and select "copy".
  • Open you webpage in your HTML editor or a plain text editor such as "notepad" and scroll to the bottom of the page.
  • Place your cursor just above the closing body tag ie. just before or above </body> and use "Ctrl + V" to paste in the code.

This is what will appear at the bottom of the page:
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).

Updates Version 2 - Extended functionality

Version 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.

Version 2.0.1 - Minor bug fix

Version 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.

Version 3.0.0 - Installation Update

Version 3.0.0 released February 2011.
* Upgrading is recommended.

* 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.

Notes Page 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 "&nbsp;" or some other text such as "enable javascript to see email address". The "&nbsp;" (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">&nbsp;</span>

Comments & Feedback

Please send any comments and feedback to .    Remember you can also make a donation



Copyright 1992 -
ITI Logo