JavaScript email cloaking
Here’s another quick one. Below is a simple JavaScript that you can use to cloak your email address when posting it on your website. It dynamically writes the email link into the page which will thwart most spambots (server-side creation of the email link will always be a little more secure). Here’s how we do it…
1 – create a new JavaScript file, name it “email.js”, and paste in the following…
var prefix = "username";
var suffix = "domainname.com";
var address = prefix + "@" + suffix;
document.write('<a href="mai');
document.write('lto:' + address + '">click here</a>');
2 – then place the following code in your page where you want the link to appear…
<script type="text/javascript" src="email.js"></script>
example:
<p>to contact me via email, please <script type="text/javascript" src="email.js"></script></p>
result:
to contact me via email, please
All you have to do is change 3 variables. The email prefix and suffix are in the first 2 lines of code in the external JavaScript file. The text to display for the hyperlink is in the last line of code (in this case – “click here”). It’s pretty self-explanatory.
Transparent PNGs in IE6
Everybody knows that IE versions 5.5 and 6 cannot render a PNG image with alpha transparency correctly. The result is a visible “box” around the image highlighting what is supposed to be the transparent part. In the past I had used the “IE7″ JavaScript that i had found on the web before IE7 was actually released. It involved including a JavaScript file in the header of your page that was responsible for post-processing all PNGs on the page just after page load using Microsoft’s proprietary IE filter: AlphaImageLoader. While that method works fine if you have a webpage or website with many PNG images, I thought I’d share a quicker way to do it inline, should you ever have the need to deal with just a single PNG. This quick little piece of code will write PNGs into your webpage in such a way that Internet Explorer below version 7 will “draw” the image properly with full alpha transparency.
In order to do this we will actually write the image into the page twice – once for IE6 and below, and again for all the other browsers. Here we go…
1 – create a 1 pixel by 1 pixel transparent GIF image and drop that in your images directory (i usually name it “spacer.gif”).
2 – here’s the XHTML to put in the <body> of your document…
<!--[if lt IE 7]>
<img id="ie6image" src="spacer.gif" alt="" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myimage.png', sizingMethod='image');" />
<![endif]-->
<img id="theimage" src="myimage.png" alt="" />
* notice how we write the image the first time using Microsoft’s Alpha Image Loader – and how this is wrapped inside IE conditional comments which basically say “if the browser is IE version less than 7″ – then we write the image again the “normal” way for all other browsers.
3 – here’s the CSS to put in the <head> of your document or external stylesheet…
#theimage, #ie6image {
width: 100px;
height: 100px;
border: 0px;
}
* html #theimage {
display: none;
}
* the second style above is the popular * html CSS hack that only IE version 6 or lower will read – telling those browsers to not display the second image.
And there you have it – a relatively simple way to solve the problem of alpha transparency in older versions of Internet Explorer. The best part about this approach is that it uses no JavaScript – just standards-compliant XHTML and CSS.
-
need my help?
Interested in having me be a consultant on your next project? to email me.
-
what i’m reading...
