Making obfuscated email address on contact page clickable

myrolemodel · 16th October 2006, 05:33 AM

I decided in favour of allowing visitors to use their own email client instead of a webform for the benefit of their own record keeping, and rather than using an image of the address or javascript encryption (incase they have them disabled in their browser) I went with a textlogo shrunken to normal-size text with inline CSS using output of the automatic generator from Email Mini-logo

I want to keep it clickable but without the address on the page itself I have only found two non-javascript methods that do this.
1. Transparent munging using HTML entities or URI escape codes on seperate pages referred to via CSS (works in IE and Firefox only)
contact.html (minimal example):

Code:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Contact us</title>
<link rel="stylesheet" type="text/css" href="hidden.css" >
</head><body><pre style="font-size: 1.34px; line-height: 1px; letter-spacing: 0px; -moz-binding: url(hidden.xml#entities)">
<a href="#" class="escaped" style="text-decoration: none;">(Text-logo of email)</a>
</pre></body></html>

hidden.css file for IE-based browsers (trident engine):

Code:

 
A.escaped:active {
	background: url("mailto:(escaped address [@ = %40 etc.])?subject=(insert subject)&body=(insert body)");
}

hidden.xml file for Mozilla-based browsers (gecko engine):

Code:

 
<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl" xmlns:h="http://www.w3.org/1999/xhtml">
   <binding id="entities">
	<content>
		<h:a href="(format of mailto:your@address.domain?subject=(insert subject)&body=(insert body) converted to HTML decimal and hexadecimal entities [@ = @ or &#x40; etc.])" style="text-decoration: none;">
		<children/>
		</h:a>
	</content>
   </binding>
</bindings>

2. Using the service at tinyurl.com to redirect to the mailto protocol. (entering mailto:your@address.domain as the URL then using the resulting http://tinyurl.com/TheCode address as the link)
change one line in contact.html to:

Code:

<a href="http://tinyurl.com/TheCode" style="text-decoration: none;">(Text-logo of email)</a>

Method #1 is limited to the two major browsers, but will always work on them and for other browsers I can put an audio file of the address being spoken into the link instead of #
Method #2 should work in all browsers (no subject or body), but only as long as tinyurl supports it, and relies on trusting them with the address.

Which of those two would you choose to make the address clickable?