James Thornton logo
James Thornton
Google
Web jamesthornton.com
Internet Business Consultant
Home Blog Bio Projects Contact Latest Blog (new site): How to Get to Genius
JamesThornton.com -\> Software -\> Graphic @

Graphic @ for Spam Prevention

Summary: Prevent e-mail siphons from harvesting your e-mail address by not using the commercial "@" character when displaying your e-mail address on a Web page; use a graphical "@" instead.

Simply create some commercial "@" images using a graphics program such as Photoshop. Crop the image so that there isn't any extra whitespace around it. Use a font that is same size and color as your website's text, and make the background of the image transparent. You may want to create several versions of different font, size, or color. I save different versions using descriptive filenames, such as:

I create a symbolic link from my most frequently used version to a filename that is easier to type, such as @.gif. Here's how to do it if you're on a Unix-like operating system: 

[nsadmin@roam images]$ ln -s graphic@-arial-12px-000000.gif @.gif

Here's the HTML needed to properly render the "@" image (I'll show you some functions in a second that makes this easy):

 HTML Code Rendered Text
Normal @: fakeuser@electricspeed.com fakeuser@electricspeed.com
Graphic @: james<img src="/images/@.gif" align=absbottom border=0 alt=@>electricspeed.com james@electricspeed.com

Since the @.gif image will probably be wrapped in a hyperlink tag, set the image border to zero so that you don't get a border the same color as the link surrounding the graphic. By setting the align attribute to absbottom, the bottom of the "@" image aligns with the bottom of the decencenders on the current line of text, as it should. An example of a decender is the tail on a "y".

As an aside, Bruce "Tog" Tognazzini, a Nielsen Norman Group partner, was using "AT" in place of the "@" character in his online e-mail address to prevent e-mail harvesters from detecting it. Awhile back, I sent him e-mail suggesting that he use a graphic "@" instead, and it looks like he adopted it: http://www.asktog.com/misc/mailer.html.

To create e-mail hyperlinks that aren't as susceptible to harvesters, use a Graphic @ in conjunction with a mailto: redirect.

Make things easy on yourself by writing some code to generate the links. This site runs on OpenACS so when I want to create an e-mail link, I write:

<%= [jt_email james electricspeed.com] %>

...to generate: james@electricspeed.com .

Here's some example code (NOTE: the OpenACS example includes the iframe hack mentioned in "Redirect mailto: for Spam Prevention"):

Perl

#!/usr/bin/perl -w

# jt_email.pl
# invocation: print jt_email(james, electricspeed.com);

sub jt_email {

  return "<nobr><a 
href=/email/redirect-mailto.pl?u=$_[0]&d=$_[1]>$_[0]<img 
src=/images/@.gif align=absbottom border=0 
alt=\"@\">$_[1]</a></nobr>";

}

OpenACS

# jt_email.tcl
# invocation: <%= [jt_email james electricspeed.com] %>

proc jt_email { user domain } { 

    set ua [ns_set get [ns_conn headers] "User-Agent"]
    set iframe_p 0 

    if {[regexp {MSIE (.+);} $ua match ie_version] && 
    ![string match "*Opera*" $ua]} {

	# Opera usually handles the mailto redirect fine;
	# however, Opera 6.x said invalid email address 
	# if you clicked the link twice; fixed by 7.0

	if {5.0 <= $ie_version} {
	    # 3.0B2 supports iframes, 
	    # but somehwhere around 5.5 the mailto redirect 
	    # started opening blank windows
	    set iframe_p 1
	}
	
    } elseif {[regexp {Mozilla/(.+?)[a-zA-Z\s]} $ua match mozilla_version]} {

	# Netscape 4.x handles it ok, 
	# but newer versions started opening blank windows

	if {5.0 <= $mozilla_version} {
	    # 5.0 supports iframes 
	    set iframe_p 1
	}

    } 

    if $iframe_p {
	
	set iframe_html "
	<iframe name=rm width=1 height=1 frameborder=0 
	scrolling=no style=\"visibility:hidden;\"></iframe>
	" 
	set target_html "target=rm"
    
    } else {
	set iframe_html ""
	set target_html ""
    }

    return "<nobr><a 
href=\"/email/?u=$user&d=$domain\" $target_html>$user<img 
src=\"/images/@.gif\" align=absmiddle border=0 
alt=\"@\">$domain</a></nobr>
$iframe_html
"

}

PHP

<?php

// jt_email.php
// invocation: print jt_email("james", "electricspeed.com");

function jt_email($user, $domain) {

  return "<nobr><a 
href=/email/redirect-mailto.php?u=$user&d=$domain>$user<img 
src=/images/@.gif align=absbottom border=0 
alt=\"@\">$domain</a></nobr>";

}
?>

ColdFusion

<cfscript>

// jt_email.cfm
// invocation: #jt_email("james", "electricspeed.com")#

function jt_email (user, domain) {

  return '<nobr><a 
href=/email/redirect-mailto.cfm?u=#user#&d=#domain#>#user#<img 
src=/images/@.gif align=absbottom border=0 
alt="@">#domain#</a></nobr>';

}
</cfscript>

ASP

Note: I don't normally write in ASP so there probably is a cleaner way to write this. 
<%

'jt_email.asp
'invocation: Response.write jt_email("james","electricspeed.com")

Function jt_email(user,domain)

  jt_email = "<nobr><a " &_
"href=/email/redirect-mailto.asp?u=" & user & "&" & "d=" & domain & ">" & user &_
"<img src=""/images/@.gif"" align=absbottom border=0 alt=""@"">" & domain & "</a></nobr>"

End Function

%>

Follow espeed on Twitter

James Thornton,<james@jamesthornton.com>
Services: Web Development 		Electric Speed: Web Applications Developer

Reader's Comments

Prevent e-mail from harvesting your e-mail addresses just to make your Gif email: STOP SPAM - Make Your Email Invisible to SPAMMERS

-- Vladimir Bosev, August 6, 2005