It is important to protect email addresses on websites from being harvested by spambots.

"Email spambots collect e-mail addresses from the Internet in order to build mailing lists for sending unsolicited e-mail, also known as spam. Such spambots are web crawlers that can gather e-mail addresses from Web sites, newsgroups, special-interest group (SIG) postings, and chat-room conversations. Because e-mail addresses have a distinctive format, spambots are easy to write. A number of legislators in the U.S. are reported to be devising laws that would outlaw the spambot." – Wikipedia

This is my method for automatically detecting email addresses and replacing them with a javascript that will disguise them from spambots. The script works in two stages one in javascript and the other in php.

First the javascript function that outputs the mailto link:

function sb_email(user,site){
document.write('<a href=\"mailto:' + user + '@' + site + '\">');
document.write(user + '@' + site + '<\/a>');
}

The function has 2 parameters "user" and "site", which are the two parts of the email address either side of the "@". This function can be called like so:

sb_email('joe','bloggs.com');

The second part is the php functions that recognise email addresses and replace them with the javascript function to disguise them:

//function to output the js
function create_js ($matches){
$parts = explode ('@', substr ($matches[0], 1));
if(substr($parts[1],-1)=='.'){$parts[1]=substr($parts[1],0,-1); $parts[2]='.';}
$str = $matches[1].'<script language="JavaScript" type="text/javascript">';
$str .= 'sb_email("'.$parts[0].'", "'.$parts[1].'");';
$str .= '</script>'.$parts[2];
return $str;
}
$js_callback = "create_js ";
 
//function to recognise emails
function email_protect($text){
global $js_callback;
$replace = '/([> ])[A-Z0-9._-]+@[A-Z0-9][A-Z0-9.-]{0,61}[A-Z0-9]\.[A-Z.]{2,6}/i';
$output = preg_replace_callback($replace, $js_callback, $text);
return $output;
}

The email_protect php function can be called on any text string like so:

echo email_protect($text);

It will automatically replace any email addresses in the text with the javascript, therefore hiding them from spambots.

This holding page built for Polydor artist, singer / songwriter Leona Naess features an animated logo with random fades and glows. The flash random timing actionscript is something I have utilised in the past to create similar effects (see: Flash mousetrails with random flashes!).

The holding page also features a streaming mp3 (using flash), mailing list signup form with javascript validation embedded youtube video and google analytics.

Check it out:

www.leonanaess.com

Heathcote Bailey is a creatively led events services company specialising in bespoke party production. The site is built in a combination of PHP, JavaScript and HTML. It features a large scrolling background image which is very cool.

Check it out: www.heathcotebailey.co.uk

This article is an extension / improvement upon another article I published on my site previously: Simple Javascript for Image Mouseovers. As I am always looking for improved methods, I was discussing the pitfalls of the javascript method with a friend (and occasional comment writer / contributor to my site) who pointed me in the direction of CSS and image sprites. This lead me to research the topic further, and I found two articles in particular which were incredibly useful:

Read on…

This is a simple javascript for creating a mouseover effect on image links, also known as an image replacement script. It works in two stages. In this example "image 1" is the link image and "image 2" is the mouseover image.

Stage 1

Add this javascript to the head of your page:

function SwapImage1() {
document.image1.src="/images/image2.jpg"
}
 
function SwapImage1Back() {
document.image1.src="/img/image1.jpg"
}

Stage 2

Add the following onmouseover and onmouseout properties to your image:

<img src="/images/image1.jpg"
onmouseout="SwapImage1Back()" onmouseover="SwapImage1()" name="image1" />