Hiding email in imagemap link

Discussion in 'Web Design and Development' started by Halcyon, Jul 28, 2007.

  1. Halcyon macrumors 6502

    Joined:
    Sep 21, 2006
    #1
    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
     
  2. yagran macrumors 6502a

    Joined:
    Jan 8, 2007
    Location:
    Brighton, East Sussex, UK
    #2
    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?
     
  3. Halcyon thread starter macrumors 6502

    Joined:
    Sep 21, 2006
    #3
    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
     
  4. yagran macrumors 6502a

    Joined:
    Jan 8, 2007
    Location:
    Brighton, East Sussex, UK
    #4
    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
     
  5. Halcyon thread starter macrumors 6502

    Joined:
    Sep 21, 2006
    #5
    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 :-(
     
  6. yagran macrumors 6502a

    Joined:
    Jan 8, 2007
    Location:
    Brighton, East Sussex, UK
    #6
    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.
     

Share This Page