Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Halcyon

macrumors 6502
Original poster
Sep 21, 2006
335
0
I don't know if this can even be done.

On this web page I'm developing there is an image with imagemaps and one of the hotspots is a contact link with an email. I'm trying to hide this email from spam harvesting robots and the usual javascript I use to scramble the address simply does not work in this case. The imagemap maps the coordinates of the hot spot and then has a href="#" where the link should go. If I insert the javascript code there ("#") it simply doesn't work.

I'm not a javascript programmer, so if somebody can guide me through this It will be greatly appreciated. If anyone has anyother method to achieve the same result, I will be more than glad to try it out.

Somebody already mentioned to me that it was not necessary to hide the email from spammers in this case, because being that the mailto link is within the image and there is no text involved, the bots can't harvest it. His explanation does not have me totally convinced...but if somebody else can corroborate this, it will be interesting (and make my life easier).

To all this, I hope I've made myself clear in explaining my predicament.

TIA
 
to start with, bots will definately be able to harvest it, as they search in particular for anything starting with 'href=' no matter where in the source code it is. but there is a simple solution..

you just use this instead.

in the head section (or in one of your current scripts):
HTML:
<script>
function emailMap() { YOUR EMAIL JAVASCRIPT HERE };
</script>

then instead of using the 'href' attribute in your map area,
use 'onclick', to link the area to the above function:
HTML:
<area shape="rect" coords="10,20,30,40" onclick="emailMap();" />

make sense?
 
Thanks Yagran...the info you've provided is helpful and logical. Even with my little experience in javascript I see it should work, but I can't get it to do so.

This is the script, just as it was provided to me (courtesy of a nifty little program called Enkoder):

<script type="text/javascript">
//<![CDATA[

function hiveware_enkoder(){var i,j,x,y,x=
"x=\"783d223078773d6a5c22717b68406f2531327b353f3b6c373e3c333d403b6c352b3775" +
"36723b69683e382c377b372b3d6837733a643b6639763c683e713b7837403c7b3c3e3c2a6a" +
"2a3740397c3c3e6a5f3b253a323b35697e3b243a403c2e382e3b706b723b7539693b31276a" +
"42717d6c5f75257732563540402e7b7c383e3c37363c3b40352e396d6a2c3b356b363b3f3e" +
"6d3b2b38693b6c363e3b353e303b2c386c3b2b6b773b4438683c6736723b46667538646b6b" +
"3b6639313c7b68403b6d3e7e3b7c36253b3269323b2c376d372b68683a67697238463b753b" +
"643a6b3b4637253b323a353c3e387c3c406b2a382a693e3b696b723b75382b3b6c6a403733" +
"373e3b6c3a3f3c7b38313c6f36683b71386a3b77386b3c3e3a6c3b2e35403c376a3c3b2c6b" +
"7e3b693e723b75382b3b6d36403b503e643b77386b3b316b703b6c3871372b3b7b3731396f" +
"3c686a713b6a6b773b6b382f396c6a2e3837373c372c683e3a306a303b6d6b413b403e6c3b" +
"3e382c3b7e367c3b2e69403b7b37313c666b6b3b643b753b446a773b2b3e6d392c693e3825" +
"39323c3238253b323a323b7c663e2d5c22773b74796b3d40272c272c3b42787e3d4075276e" +
"6765387335633861677038653e2837783729373b6a66386f36723b286b69373d6830383b38" +
"693c3c6b783b2e6a6c3b653a6e3b6739743c68383b3b69672b382b3a29387b376a383d3778" +
"382e376331686e612d727743796f786467657a41787433287d6930292c2d2a332c3b2d696a" +
"667528666a683c78336a3273297a6a422b303d7e392534323b32792e2b373d425330746e72" +
"40696d6e79676c2e73666a72716f336d7d4341686e6140723543426f6e642c652e282e6a6c" +
"293e7d6b79223b6a3d6576616c28782e636861724174283029293b783d782e737562737472" +
"2831293b793d27273b666f7228693d303b693c782e6c656e6774683b692b3d32297b792b3d" +
"782e73756273747228692c31293b7d666f7228693d313b693c782e6c656e6774683b692b3d" +
"32297b792b3d782e73756273747228692c31293b7d793d792e737562737472286a293b\";y" +
"='';for(i=0;i<x.length;i+=2){y+=unescape('%'+x.substr(i,2));}y";
while(x=eval(x));}hiveware_enkoder();

//]]>
</script>

This is what I've placed within the head of the html documet:

<script type="text/javascript">
function emailMap() {

function hiveware_enkoder(){var i,j,x,y,x=
"x=\"783d223078773d6a5c22717b68406f2531327b353f3b6c373e3c333d403b6c352b3775" +
"36723b69683e382c377b372b3d6837733a643b6639763c683e713b7837403c7b3c3e3c2a6a" +
"2a3740397c3c3e6a5f3b253a323b35697e3b243a403c2e382e3b706b723b7539693b31276a" +
"42717d6c5f75257732563540402e7b7c383e3c37363c3b40352e396d6a2c3b356b363b3f3e" +
"6d3b2b38693b6c363e3b353e303b2c386c3b2b6b773b4438683c6736723b46667538646b6b" +
"3b6639313c7b68403b6d3e7e3b7c36253b3269323b2c376d372b68683a67697238463b753b" +
"643a6b3b4637253b323a353c3e387c3c406b2a382a693e3b696b723b75382b3b6c6a403733" +
"373e3b6c3a3f3c7b38313c6f36683b71386a3b77386b3c3e3a6c3b2e35403c376a3c3b2c6b" +
"7e3b693e723b75382b3b6d36403b503e643b77386b3b316b703b6c3871372b3b7b3731396f" +
"3c686a713b6a6b773b6b382f396c6a2e3837373c372c683e3a306a303b6d6b413b403e6c3b" +
"3e382c3b7e367c3b2e69403b7b37313c666b6b3b643b753b446a773b2b3e6d392c693e3825" +
"39323c3238253b323a323b7c663e2d5c22773b74796b3d40272c272c3b42787e3d4075276e" +
"6765387335633861677038653e2837783729373b6a66386f36723b286b69373d6830383b38" +
"693c3c6b783b2e6a6c3b653a6e3b6739743c68383b3b69672b382b3a29387b376a383d3778" +
"382e376331686e612d727743796f786467657a41787433287d6930292c2d2a332c3b2d696a" +
"667528666a683c78336a3273297a6a422b303d7e392534323b32792e2b373d425330746e72" +
"40696d6e79676c2e73666a72716f336d7d4341686e6140723543426f6e642c652e282e6a6c" +
"293e7d6b79223b6a3d6576616c28782e636861724174283029293b783d782e737562737472" +
"2831293b793d27273b666f7228693d303b693c782e6c656e6774683b692b3d32297b792b3d" +
"782e73756273747228692c31293b7d666f7228693d313b693c782e6c656e6774683b692b3d" +
"32297b792b3d782e73756273747228692c31293b7d793d792e737562737472286a293b\";y" +
"='';for(i=0;i<x.length;i+=2){y+=unescape('%'+x.substr(i,2));}y";
while(x=eval(x));}hiveware_enkoder();
};
</script>

And this is the html code for the imagemap...placed in the appropriate body section of course:

<map name="Map">
<area shape="poly" coords="473,314,486,312,582,319,577,391,469,384,468,367,473,315" onclick="emailMap();" />
</map>

When hoovering over the imagemap the cursor will not change (as to indicate it is a link) and most importantly, all it does is open a blank page with a text link "Contact".

Is my javascript code wrong, or am I doing something wrong?

TIA
 
this should work fine now :D

HTML:
<script type="text/javascript">
function emailMap(){var i,j,x,y,x=
"x=\"783d223078773d6a5c22717b68406f2531327b353f3b6c373e3c333d403b6c352b3775" +
"36723b69683e382c377b372b3d6837733a643b6639763c683e713b7837403c7b3c3e3c2a6a" +
"2a3740397c3c3e6a5f3b253a323b35697e3b243a403c2e382e3b706b723b7539693b31276a" +
"42717d6c5f75257732563540402e7b7c383e3c37363c3b40352e396d6a2c3b356b363b3f3e" +
"6d3b2b38693b6c363e3b353e303b2c386c3b2b6b773b4438683c6736723b46667538646b6b" +
"3b6639313c7b68403b6d3e7e3b7c36253b3269323b2c376d372b68683a67697238463b753b" +
"643a6b3b4637253b323a353c3e387c3c406b2a382a693e3b696b723b75382b3b6c6a403733" +
"373e3b6c3a3f3c7b38313c6f36683b71386a3b77386b3c3e3a6c3b2e35403c376a3c3b2c6b" +
"7e3b693e723b75382b3b6d36403b503e643b77386b3b316b703b6c3871372b3b7b3731396f" +
"3c686a713b6a6b773b6b382f396c6a2e3837373c372c683e3a306a303b6d6b413b403e6c3b" +
"3e382c3b7e367c3b2e69403b7b37313c666b6b3b643b753b446a773b2b3e6d392c693e3825" +
"39323c3238253b323a323b7c663e2d5c22773b74796b3d40272c272c3b42787e3d4075276e" +
"6765387335633861677038653e2837783729373b6a66386f36723b286b69373d6830383b38" +
"693c3c6b783b2e6a6c3b653a6e3b6739743c68383b3b69672b382b3a29387b376a383d3778" +
"382e376331686e612d727743796f786467657a41787433287d6930292c2d2a332c3b2d696a" +
"667528666a683c78336a3273297a6a422b303d7e392534323b32792e2b373d425330746e72" +
"40696d6e79676c2e73666a72716f336d7d4341686e6140723543426f6e642c652e282e6a6c" +
"293e7d6b79223b6a3d6576616c28782e636861724174283029293b783d782e737562737472" +
"2831293b793d27273b666f7228693d303b693c782e6c656e6774683b692b3d32297b792b3d" +
"782e73756273747228692c31293b7d666f7228693d313b693c782e6c656e6774683b692b3d" +
"32297b792b3d782e73756273747228692c31293b7d793d792e737562737472286a293b\";y" +
"='';for(i=0;i<x.length;i+=2){y+=unescape('%'+x.substr(i,2));}y";
while(x=eval(x));}
</script>

<map name="Map">
<area shape="poly" coords="473,314,486,312,582,319,577,391,469,384,468,367,473,315" onclick="emailMap();" style="cursor: hand" />
</map>

oh and to get the cursor to change when you hover over it use css styling (i.e. cursor: pointer; cursor: hand)

hope that helps
 
Problem solved...with a twist

Sorry for the delayed response, but I've been away for a couple of days :)

I couldn't get the javascript to work. Maybe I'm missing something here or maybe the script was never meant to work in this fashion. I know it works with a simle text link because I use it in several other pages. Just click on it and it takes you straight to your mail application. Here, it just opens a new page that only has the text link of you mail address...once you click on it your set to go, but that is not what I'm looking for.

Anyway, I took a right turn and used something else that works but that I'm not sure how safe or efficient it is at hiding your email form bots. I found this web page

http://www.mways.co.uk/prog/hidemail.php

that offers three options to generate a scrambled code; javascript, no javascript and mediawiki style (don't have the faintest idea what this last one is). I used the no javascript option and it generated the following code:

<a href="mailto:%74%72%69%74%6f%6e%40%74%72%69%74%6f%6e%73%75%62%2e%63%6f%6d">triton@tritonsub.com</a>

Placed it in my html code within the appropiate imagemap and everything works fine.

I really don't know how it works, or how safe t is with spam bots...guess time will tell...or maybe one of you guys will :)

Thanks for your help.

EDIT - I just noticed that the last second of what is supposed to be over 100 characters of scrambled code displays the email address...that is, it happens in this post and not on the web page...which makes me wonder how safe it is :-(
 
HTML:
<a href="mailto:%74%72%69%74%6f%6e%40%74%72%69%74%6f%6e%73%75%62%2e%63%6f%6d">triton AT tritonsub DOT com</a>

i would use that to be safe :D ...
although some bots can read these ascii codes its a pretty safe option.
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.