Hide Hyperlinks From Site Visitors

Introduction

When you move your mouse pointer on any of the link in the browser, the corresponding hyperlink is shown in the status bar. As a webmaster or developer of a web site, many times you want to hide such hyperlinks in your pages. This is needed frequently in download pages to hide the original content location or payment related pages. In this small code sample we will use ASP.NET HyperLink web control to display our links and then write code to hide them from the site visitors.

The code

As an example let us assume that you have a HyperLink control called HyperLink1 on the web form. When that control is rendered in the browser; it gets converted into an HTML <A> tag. In order to hide the URL from the end user we need to handle three of its client side events:

• OnMouseOver
• OnMouseMove
• OnContextMenu

You might be wondering why we need to handle the third event. This is event is raised when user right clicks on the link. Since we want to hide the link; we also would not like the visitors to use "Copy Shortcut" option from the right click menu. Hence, we also need to handle the OnContextMenu event.

Note that these are client side events and we need to write JavaScript code to handle them. There are two steps involved in this:

• Attach client side events and their event handler function in your server side code.
• Write client side function to handle the events

Attaching events and event handler

In order to attach a client side event and its handler ASP.NET provides an Attributes collection. You can use this collection as follows:

HyperLink1.Attributes.Add("onmouseover","HideLink();"); 
HyperLink1.Attributes.Add("onmousemove","HideLink();"); 
HyperLink1.Attributes.Add("oncontextmenu","return false;"); 

Here, we are specifying that OnMouseOver client side event will be handled by a function called HideLink(). In the OnContextMenu event we simply want to return false to indicate as if that event never fired.

Client side function

Here is the JavaScript function that does the job for us.

function HideLink() 
{ 
window.status="You do not see the link here!"; 
} 

Here, we simply set the status bar text of the browser window to some custom text. That's it.

Download

You can download the complete sample code of this article. Just click on the download link at the top of this article.

Summary

In this small article we saw how one can hide hyperlinks in the client browser using ASP.NET controls and JavaScript.