If you want to show an e-mail address on a web page, you usually insert some HTML code like this:
Unfortunately, this type of code can easily be captured by spammers, and soon your address will be distributed on CDs to bad people. Your inbox will be full of unsolicited mail.
Because this situation is recurring on web pages all the time, I decided to create a user control that deals with it. It will show the mail address just as you would expect it, but it will be spam-safe.
From now on, you can just drop the
SpamSafeLink control on your ASP.NET page, set one or two properties, and the control will take care of the rest.
Installing the control
Just unzip the source files and copy both files SpamSafeLink.ascx and image.aspx to any folder in your website.
Using the control
In your editor (Web Matrix, C# Builder, Visual Studio, ...), drag the file SpamSafeLink.ascx onto your page, where you want the link to appear.
If you use another editor, you can add the control manually. Add this directive on top of the page:
<%@ Register TagPrefix="rw" TagName="SpamSafeLink" Src="SpamSafeLink.ascx" %>
Then, add a tag like this in your HTML code where you want the e-mail link to be displayed:
<rw:SpamSafeLink id="SpamSafeLink1" Address="email@example.com" Text="Contact"
BgColor="White" LinkColor="Blue" Size="12" FontName="Verdana" runat="server">
Next, make sure you use the appropriate settings.
Use the demo page demo.aspx as a sample showing you how the
These are the control properties that you can set:
This is the caption that will be displayed as a link. Only set this property when you want a caption that is NOT the mail address. When omitted, the
How it works
<img src="<%=GetImageURL()%>" />
GetImageURL() calls an ASP.NET file that will create the image on-the-fly:
Private Function GetImageURL() As String
Return "image.aspx?address1=" & _address1 & "&address2=" & _address2 & _
"&linkcolor=" & _LinkColor.ToArgb() & "&bgcolor=" & _BgColor.ToArgb() & _
"&size=" & _Size & "&FontName=" & _FontName
The address, caption, colors, size and font are taken from the user control's properties, and passed as GET query parameters. This block calls the code in image.aspx, which will create a GIF image that just displays the e-mail address. It will not work as a clickable link in this case.
In order to save processor time, the cache duration time is set very high.
<%@ Page Language="VB" %>
<%@ OutputCache Duration="3600"
<%@ import Namespace="System.Drawing" %>
<%@ import Namespace="System.Drawing.Imaging" %>
<%@ import Namespace="System.Drawing.Drawing2D" %>
Sub Page_Init( sender As Object, e As EventArgs)
Response.ContentType = "image/gif"
Dim FontName As String = Request.QueryString("FontName")
Dim Address As String = Request.QueryString("Address1") _
& "@" & Request.QueryString("Address2")
Dim objFont As Font = New Font(FontName, CInt(Request.QueryString("size")))
Dim objBitmapTemp As Bitmap= New Bitmap(1, 1)
Dim objGraphicsTemp As Graphics = Graphics.FromImage(objBitmapTemp)
Dim ImageSize As SizeF = objGraphicsTemp.MeasureString(Address,objFont)
Dim objBitmap As Bitmap= New Bitmap(Convert.ToInt32(ImageSize.width),_
Dim objGraphics As Graphics = Graphics.FromImage(objBitmap)
Dim BgBrush = New SolidBrush(Color.FromArgb(Request.QueryString("bgcolor")))
Dim TextBrush = New _
objGraphics.FillRectangle(BgBrush, 0, 0, _
ImageSize.width, ImageSize.height) objGraphics.DrawString(Address, objFont,_
TextBrush, 0, 0)
Here are some ideas for future improvement:
- Extract the font face, color and size from a style sheet (if the page uses one).
- Use relative sizes instead of absolute ones.
- Convert it to a full custom control.
If anyone decides to extend this, or has any comments or questions, then it would be great to hear from you.
Points of interest
- user controls.
- using GDI+ graphics in ASP.NET.
5/8/2004: Release of version 1.0.