ITI Logo

Protect Your Email Address with ITI's ELinks ©

Version 2
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 "maito:" 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 "maito:" 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 2
Last updated: June 21, 2010
Click on the button to view the original version 1 documentation. New users should ignor the changes to version 1.
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 the only way to prevent spam is to not give your email address to any one. 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 impliment without having to understand HTML code. This also created an opprotunity 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 element defaults 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>.

The ELinks parameters are in the same format as the HTML element attributes: variable=value pairs (AKA value/pairs):

Variable = Value
to = the recipient's email address
cc = a cc recipient's email address
bcc = a blind copy recipient's email address
text = the visible/clickable text (the innerHTML)
linktext = same as text.
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 = The ccs style sheet class name to apply to the link when its converted to an email link.
css = same as class. (new version 2)
tt = tool tip value. (new version 2)

ELinks value/pairs variables are not case sensitive. 'teXT' is the same as 'text'.

ELinks value/pairs actually become the value of the title attribute of the element.

ELinks value/pairs must be separated by commas and enclosed within a single set of quotes assigned to the title attribute.
ELinks value/pairs must be separated by semi-colons and contained within a set of quotes assigned to the title attribute. title="variable=value ; variable=value" (a comma instead of a semi-colon was introduced in version 2 as the preferred seperator)

new In version 2 the equal sign (=) is optional and should now only be used to remove ambiguity.
<tag title="variable value, variable value">innerHTML</tag>
<tag title="variable=value; variable=value">innerHTML</tag>
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 with out the variable names. ("bcc" is required to add a bcc recipient)
The values for "to", "cc" and "bcc" (ie recipient email addresses) can be used with out the variable names. <span class="elink" title=" linkText Email Me, recipientA, recipientB, subject Text, bcc recipientC, recipientD " > [no script] </span>
<span class="elink" title=" linkText=Email Me ; recipientA ; recipientB ; subject=Text ; recipientC " > [no script] </span> Elinks considers a value without a variable assignment to be email recipient.
In this case the first value found without a variable name (recipientA) is assigned to the 'to' variable, the second (recipientB) assigned to the 'cc' variable.
The third (recipientC) has been explicitly assigned to the 'bcc' variable.
Any additional recipients found without a variable assignment are considered to be 'cc' recipients. In the above example recipientD is also a 'cc' recipient.
In this case the first value found without a variable name (recipientA) gets assigned to the 'to' variable, the second (recipientB) assigned to the 'cc' variable and the third (recipientC) to the 'bcc' variable. Elinks considers a value without a variable assignment to be email recipient.
Other than the unassigned recipients order, the order of the value/pair does not matter.
"cc" and "bcc" recipients are optional and seldom ever used but follow the previous rule.
All value/pairs or parameter values are optional.
<span class="elink" title=" " ></span> displays absolutely nothing.

In Summary 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>
<span class="elink" title=" to=toname ; text=Email Me ; cc=ccname ; bcc=bccname ; subject=Text ; body=Text ; class=classname " >[no script] </span>

Note: An elink without a recipient simply creates a clickable link. <span class="elink" title=" text=Click Me; "></span>
However: <span class="elink" title=" text=Click Me; "></span> displays nothing but generates an error because variables have been assigned without recipients.

Short Syntax vs. Long Syntax
Short Syntax vs. Long Syntax
Through out 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.
Note: Dots (.) in the user name portion of an email address should not be replaced with spaces and must be present to create the link.

Converting 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>
<a title="info@example.com?cc=JoeBlow@example.com&subject=Service Enquiry">Email me</a>
Replace the '@', 'dots' and '=' characters in the href value with spaces:
Replace the '@' and 'dots' in the email addresses with spaces: <a title="info example com?cc JoeBlow example com&subject Service Enquiry">Email me</a>
<a title="info example com?cc=JoeBlow example com&subject=Service Enquiry">Email me</a>
Replace the '?' and '&' characters with commas:
Replace the '?' and '&' characters with semi-colons: <a title="info example com, cc JoeBlow example com, subject Service Enquiry">Email me</a>
<a title="info example com ; cc=JoeBlow example com ; subject=Service Enquiry">Email me</a>
Remove the innerHTML from between the anchors 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>
<a title="info example com ; cc=JoeBlow example com ; subject=Service Enquiry ; linkText=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>
<span title="info example com ; cc=JoeBlow example com ; subject=Service Enquiry ; linkText=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.
<span class="elink" title="info example com, cc JoeBlow example com, subject Service Enquiry, text Email me"></span>
<span class="elink" title="info example com ; cc=JoeBlow example com ; subject=Service Enquiry ; linkText=Email me"></span>


ELinks - The Basics Example Notation

Through out 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>
   <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>
</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>
   <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();">
   Hello World
   <span class="elink" title="info, text Email me"></span>
   <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 seperate directory for the ELinks source files so they are seperate 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.

The onLoad() function. onload="ELinks();"
After the page has loaded in the visitors browser the ELinks() function needs to be called (without any paramaters) to create the readable/clickable links.
This is accomplished inside the body tag by adding onLoad="ELinks()"
If you already have an onLoad function defined then append the ELinks() function to it: onLoad="MyOtherFunction();ELinks()" (notice the semicolon)

If you are initializing other JavaScript with a call to "onload=xxxx;" from within another JavaScript script then add ELinks() to the initialization function defined by the onLoad argument.
eg. Suppose your JavaScripts contains a line similar to "onload=init;" where "init" is the name of a function in your script.
Locate the initialization function and add ELinks() at the end but before any return statement.

function init(){
   other code
   ....
   ELinks();
   return true;
}

onload=init;

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

The Source Code located at http://www.example.com:

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

<body onload="ELinks();">
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 />
<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, therfore 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 paramaters.

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

<body onload="ELinks();">
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 />
<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>
   <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{}
     .elinkRed:link, .elinkRed:visited {color: red; text-decoration: none;}
   </style>
</head>
<body onload="ELinks();">
   Hello World
   This is a link without any style applied:   <span class="elink" title=" Info, LinkText Contact Us "></span>
   This is a link with no style assigned:   <span class="elink" title=" Info ; LinkText=Contact Us "></span>    The same link with the class <strong>elinkRed</strong> applied:   <span class="elink" title=" Info, text Contact Us, css elinkRed "></span>
   The same link with a style assigned:   <span class="elink" title=" Info ; LinkText=Contact Us ; class=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 behaviour/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".

New in version 2 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.
Instead of adding it to every link, assign the class name (style) to the eLinkDisplayClass 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.
Even if you have a style assigned to eLinkDisplayClass you can still use the class variable in your individual links to over ride the global default value set in eLinkDisplayClass. The class value in the link will take precedence over the eLinkDisplayClass value.
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.
If you have eLinkDisplayClass set and want the browser default style and behavior, just add the class variable and assign a class name of an empty style eg. .emptyStyle{}; or even the .elink style if you haven't added anything to it.

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

New in version 2 The "title" attribute also refered to as a "tool tip" can be added to the 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":

<body onload="ELinks();">
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

New in version 2 ELinks recognizes any event attributes added to the ELink tag and adds them to the converted link.
Here is an example using mouseOver/mouseOut events that contain inline stlye changes and an onClick event that calls a javascript function.

<!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>
   <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 onload="ELinks();">
   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 add inline attributes and events just as you would for any HTML element.

The attributes are added to the ELink tag element, in this case the "span" element, and not as a paramater in the "title" attribute.
Refer to Example #4 on how to add a different "class" attribute value.


Advanced Settings - The Global Variables Editing ELinks Default 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 DomainDefault, DomainAlias, DomainHosts, LinkElement, LinkClass, LinkStyle, and LinkTitle are discussed individually later.

Variable Name Type DescriptionDefault Value
DomainDefault String ELinks will use this domain name instead of the website URL domain""
DomainAlias Array Disabled[]
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 and a value to the converted linktrue

Deprecated version 1 variable names:
Version 1 Global variables have been deprecated. Update to the version 2 variable names:

Version 1 >>> Version 2
eLinkDefaultDomain >>> DomainDefault
eLinkAliasDomains >>> DomainAlias
eLinkHostNames >>> DomainHosts
eLinkTag >>> LinkElement
eLinkClassName >>> LinkClass
eLinkDisplayClass >>> LinkStyle
eLinkToolTip >>> LinkTitle
eLinkAlerts >>> - obsolete -
eLinkProcessTime >>> - obsolete -

In version 3 the version 1 variable names will not be recognized.
The ELinks Installers can be used identify deprecated variable names.     

Value Type Format:

To modify ELinks default settings:

The changes made in the "HEAD" section of the web page only affect that page. You can therefore customized changes to to each web page.

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 each pages HEAD section.
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 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 near the top of the file and appear as follows.

this.obj = { /*! .......... Configuration Options .......... */
  /*! String */ DomainDefault : ""
  /*! Array */ ,DomainAlias : []
  /*! Array */ ,DomainHosts : ["www"]
  /*! String */ ,LinkElement : "span"
  /*! String */ ,LinkClass : "elink"
  /*! String */ ,LinkStyle : ""
  /*! Boolean or String */ ,LinkTitle : true
  /*! .......... End Of Configuration Options .......... */
  /*! .......... The following only apply if and when you are using the ELinks Installer .......... */
  /*! Boolean */ ,Installer : false
  /*! String */ ,Language : "en"
  /*! Registration Key */ ,rKey : ""
  /* String */ ,ELinksScript : "ELinks.js" // the name of this file.
  /* String */ ,ELinksInstaller : "ELinks.js.js" // the name of Installer file.
  /* String */ ,ELinksLangDir : "lang" // the directory the language files are stored in.
  /* String */ ,ELinksVersion : "2.0.0.0" // version number
  /*! */
};

Do not add any markup after the variable names or values.
All varaibles 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 explicetly set to either true or false.

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 seperate array values).

Editing in the HEAD Section
HEAD Section

Open the web page in your HTML editor or in a "plain text" "text" editor (not MS Word).
New in version 2 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 paramaters.

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 variable names are case-sensitive and should not be in quotes. The variables can set individually on multiple lines: (this is actually multiple individual calls to ELinks() and showing it on seperate lines is clearer)

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

<!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>
    <script type="text/JavaScript">
      /* <![CDATA[ */
      ELinks({DomainDefault:"examlpe com"});
      ELinks({DomainHosts:["www","server"]});
      /* ]]> */
   </script>
    <style type="text/css"> .elink{} </style>
 </head>
<body onload="ELinks();">
   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>
   <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>
    <script type="text/JavaScript">
      /* <![CDATA[ */
      ELinks({DomainDefault:"examlpe com", DomainHosts:["www","server"]});
      /* ]]> */
   </script>
    <style type="text/css"> .elink{} </style>
 </head>
<body onload="ELinks();">
   Hello World
   ....
</body>
</html>

Editing in the onLoad() function
Body onLoad()

New in version 2 You can also re-assign variable values in the onLoad() function but you must include run:1 as the last ELinks paramater so that ELinks knows to continue with executing the script:

<body onload=" ELinks ( { variable : value , variable : value , run : 1 } ) ;">     This is the simplest/easiest method although it could get quite long.

<!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({DomainDefault:"examlpe com", DomainHosts:["www","server"], run:1});">
   Hello World
   ....
</body>
</html>

Do not include the "run:1" paramater in the "HEAD" section as this will instruct ELinks to initiate the conversion before the page has loaded and will fail.

DomainDefault var eLinkDefaultDomain - Deprecated variable name and format
{ 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 capitol 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" };

DomainAlias var eLinkAliasDomains - Deprecated variable name and format
{ DomainAlias : [""] }

Version 2 disabled.

There is no valid reason to use or retain this variable. Unless I find a valid use for it, it will removed completely from version 3.

Setting the DomainDefault to a specific domain accomplishes everything this varaible was intended to be used for.

DomainHosts (Host Names) var eLinkHostNames - Deprecated variable name and format
{ 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 any additional host names used in your site to the DomainHosts array.

You'll 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 else where 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 accessing the web site.

Just add the additional host names to the DomainHosts array:

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

LinkElement var eLinkTag - Deprecated variable name and format
{ 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 one 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 through out 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.

{ LinkElement : "span" }

LinkClass var eLinkClassName - Deprecated variable name and format
{ 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 the same class name through out 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) var eLinkDisplayClass - Deprecated variable name and format
{ LinkStyle : "" }

A "Cascading Style Sheet" value.

If your website design includes a specific CSS class/style you can apply that style to all your links by assigning the class name to this 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 with or without any style rules.

{ LinkStyle : "cssRule" }

LinkTitle var eLinkToolTip - Deprecated variable name and format
{ 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 can not 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 neccessary, 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 wesite 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 wesite 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 leau 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 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 leau of ELinks altogether.

Contact Us
The "Contact Us" Form is described and available as a seperate 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  <>



Donate

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 me to add more. Donate Here


Updates, Notes and Comments Updates

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. Changes in Version 2

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