I won’t teach you that spam is a major problem these days. As soon as your email address is found on a web page, it is potentially exposed to spammers that can extract it automatically from HTML pages using robots. For that reason, many people cloak their email address:
- by writing something like "john dot doe at gmail dot com" or even "john.doe(removethis)@gmail.com" in order to trick robots whereas humans can still understand the actual address.
- by replacing its textual form with an image. That way, unless the robots use OCR, the email address can’t be extracted automatically from web pages.
Both methods have a downside: visitors can’t click the email address to send an email immediately if the email address is not textually included in the HTML page (as a "mailto" anchor link). Here, I propose a workaround that allows visitors to see and click your email address without exposing it in textual form on your HTML page.
The trick is to cloak your clickable email address in a flash object. If you even too paranoid to leave your email address in textual form in the flash file (which is binary and compressed), you can even put an image instead (this won’t be explained here, though). We will use SWF Tools to create the flash a file from an image containing your email address.
Step 1: Create an image representing your email address
Use your favorite "paint" program (I use "paint.net") to write your email address, crop the canvas (mine is 164x18), then save the image to a file (use png if you want optimal quality). Note that you may want to make the background of your image transparent, this will be supported in the resulting flash file.
Step 2: Create a script to generate the flash file
This time, you’ll need to create a file with your favorite plain text editing program (like notepad). Write (or copy-paste if you’re lazy) the following source code in the file:
# Generate a flash file cloaking an email link
# Run using Swftools http://www.quiss.org/swftools/
.flash bbox=164x18 version=5 name="emaillink.swf" compress
.png button_img "emailmini.png"
.button email_button
.show button_img as=idle
.show button_img as=area
.show button_img as=hover
.show button_img as=pressed
# ActionScript
.on_press:
getURL("mailto:myemail@address.com", "");
.end
.end
.put email_button pin=center x=82 y=9
.end
Now we’re going to do some replacements for the parts written in red. 164x18 are the dimensions of the image you created on step 1, and emailmini.png is its filename. Write your email address in the getUrl function. Then replace x=82 y=9 with the central coordinates of your image (in my case x=(164/2)=82 and y=(18/2)=9).
Save your file as "emaillink.sc", in the same directory as the image you created in step 1.
Step 3: Run the script using SWFTools
First, you may need to download SWFTools freely from http://www.SWFTools.org then install it. Then run "swfc.exe" with "emaillink.sc" as an argument. Whatever the way you do (command line or drag&drop), make sure that the image file you’re referencing in your script can be found in the current directory.
This will result in a "emaillink.swf" flash file in the current directory. You can test it by drag&dropping it to a web browser.
Step 4: Embed the flash file in your html page
Embedding your cloaked email link into your html page consists in writing the following code:
<object type="application/x-shockwave-flash" data="emaillink.swf" width="164" height="18">
<param name="movie" value="emaillink.swf" />
<param name="wmode" value="transparent" />
<!–alternate content –>
<img src="emaillink.png" alt="my e-mail address: myemail at address dot com"/>
</object>
As for the script, you may need to replace some values here. emaillink.swf (appearing twice) is the name of your flash file, 164 and 18 are its dimensions. The img element defines an alternative, if the user’s environment is not able to display Flash content. If you want to keep it, you may need to put in the name of the image file you created on step 1 and a human-understandable textual representation of your email address (don’t write its normal form if you don’t want robots to extract it automatically by parsing your page).
Enjoy the result
This is how my cloaked email link looks:
If it doesn’t show as a Flash object, check it out on my homepage instead.