AskLG

Legendary Scripts is a new segment here at AskLG designed to solve some typical web design issues.  Here, I get to play around with Javascript in order to make simple solutions to mundane or difficult tasks.  Today I’m releasing two new scripts.  The first script is a spam hider to help prevent spammers from getting your email address.  The second script focuses on tooltips.  Using CSS and a little Javascript, you too can have tooltips on your website.

LegendarySpamHide

Objective: Bots troll websites daily trying to obtain more email addresses to spam.  In response, many developers implement spam security mechanisms to prevent their (and others) email addresses from being snatched.  LegendarySpamHide provides another layer of security against these spammers without losing key functionality.

How It Works: First, LegendarySpamHide parses your web page looking for a ‘mailto:’ link.  Once a mailing link is found, it changes the email address to ‘nospam@nospam.com’.  When a bot comes around, it finds this address and not the real email.  The real email address is stowed safely away in Javascript, and exchanged when a legitimate user mouses over the email link.  This way, no functionality is lost and the bots can’t nab your address.  Cool.

Example: I practice what I preach.  Here’s my email address.
Note: Firebug or some other plugin might help see what’s going on.  It’s hidden, I promise.

Download: [drain file 7 url]
Side Note: I am having issues with it working in Firefox 3 Beta 5.  Then again, a ton of things don’t work in FF3 yet.

LegendaryTips

Objective: When you hover over a link, a little information bar pops up called a tooltip.  This information is designed to provide more details about where the link goes.  The tooltip that is displayed by your browser is just so ugly.  Seriously! Wouldn’t be nice if it was sexier?  This is what LegendaryTips achieves.

Now, there are my solutions to this problem and most of which can be found online for free.  Almost all of these solutions require you to include an extra ’span’ or ‘div’ to your links.  That’s too much of a hassle and I’m too busy (lazy, maybe?) to actually do that.  Instead, LegendaryTips takes care of all that for you in one automated process.  Awesome, eh?

How It Works: First, LegendaryTips parses your web page looking for links.  If the link has information in the ‘title’ field, then it builds a tooltip.  When the link is moused over, the tooltip is shown.  Viola!  Not only does LegendaryTips show you the tooltip, but it moves too!  The tooltip will actually follow the mouse around until the mouse moves off the link.  These tooltips are completely style-able to your liking by CSS.  For added ease, the CSS can be in an external file or even in the LegendaryTips Javascript code.  Flexibility is great right?
Example: How about a nice tooltip link.
The CSS used in this demonstration is:

#LegendaryTip {
background: #111;
color: #07E;
position: absolute;
left: 0px;
top: 0px;
display: none;
font-size: 14px;
border: 1px solid #333;
padding: 8px 8px 8px 8px;
filter:alpha(opacity=85);
-moz-opacity:.85;
opacity:.85;
text-transform: lowercase;
letter-spacing: -1px;
}

Download: [drain file 8 url]

If you have issues, comments, praise, hate, suggestions or just want to say ‘hi’, please drop a comment below or email me.

Tags: address, block, code, eliminate, email, email address, free, hide, javascript, kill, legendary, legendaryscript, legendaryscripts, mousemove, mouseover, projects, rollover, spam, Tooltip, tooltips

This entry was posted on Wednesday, April 30th, 2008 at 10:41 pm and is filed under William. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.