1/4 your spam with onmouseover

Truism of the decade: spam is evil. I’m pessimistic enough to believe we’ll always have it with us. But here’s our two cents worth: use JavaScript onmouseover to set your mailto links. Like so:

<a onmouseover='e="info"+String.fromCharCode(64)+ "micropledge.com"; this.href="mai"+"lto:"+e; this.firstChild.nodeValue=e;' href=''>Email us</a>

Try it: email microPledge.

SpamIt’s not particularly new or original, and it’s not fool-proof by any means, but the stats are good. After we implemented it at Brush Technology, we noticed a significant drop in spam volume. My brother Berwyn’s went down to 1/4 of what it was, and he says it’s still dropping. (I get a fair bit of spam from some unprotected addresses, though almost none from onmouseovered ones.)

All this says two (good) things to me:

I like users to see our address, so this code also sets the nodeValue inside the anchor, but you could leave that out if you wanted. You’ll see in our sidebar email link we’ve set the href to a fall-back page that tells users what to do if they’ve got JavaScript off. We also set the title to something useful. If you’re feeling friendly to keyboard users, I imagine you can set onfocus too.

That reminds me, anyone know what percentage of users turn JavaScript off? (And what kind of users?) I’ve heard 10%, but I reckon that these days it’d be less than 1%. JavaScript is almost required with today’s web. And I don’t think that’s a bad thing — I love Gmail and other JS-heavy apps.

11 June 2007 by Ben    6 comments

6 comments (oldest first)

cdog 11 Jun 2007, 15:14 link

I whitelist Javascript with the NoScript Firefox extension. If I noticed a broken email link, I’d probably at least temporarily enable JS for the domain, unless it was doubleclick or something.

Most sheeple probably aren’t this savvy and let JS spew all kinds of breadcrumbs about themselves. You probably don’t have much to worry about with this method.

Andrew 12 Jun 2007, 20:17 link

Having a fallback page is the perfect solution for those without JS enabled. A tiny bit of extra hassle, for a lot of gain. (I’m definitely going to employ this, after not including mailto: links on any of my pages for years now!)

mmmike 12 Jun 2007, 23:13 link

NoScript user here. :-) Instead of the empty href=” you should put something meaningful like a link to a contact page or something. e.g. href=”/email” on this site. Otherwise you’re just linking to the page itself and there are no signs that the link relies on javascript to not be busted.

Ben 13 Jun 2007, 12:28 link

Interesting to note you’re a non-JS user — thanks.

We do actually use a fall-back page like that for our real email link in the sidebar. I thought it would complicate the example, but I noted it in my second-to-last paragraph. Anyway, I’ve added the fall-back href to the example link (but kept the example code the same).

Richad 14 Aug 2007, 17:14 link

Why onmouseover?

It’s not expected behaviour for a link to change as you mouse over it, I would call a function at window.onload that iterates over all ‘a’ elements that start with ‘mailto:’ and decrypt the link.

Ben 14 Aug 2007, 17:59 link

Thanks Richard. Yeah, I’ve wondered about that “expected behaviour” issue a number of times, but I’ve concluded it doesn’t hurt anyone.

Decrypting the mailto: is a good idea, but we were after something where you had a real visible email address that you could view and copy and paste.