Hiding URLs of Web Page Links
When a mouse hovers over a link, the link URL is clearly
visible in the browser's status bar.
Sometimes that is not desirable. Two types of links site
owners might want to hide are affiliate URLs and click
counter/redirector URLs. Each type of URL has its own
hiding method.
The two methods assume certain sets of priorities.
In the table, "immediate destination URL" is the affiliate
or click counter/redirector URL and "final destination URL"
is the URL where the browser eventually ends up at when the
link is clicked.
| Priority Consideration |
Affiliate
Link |
Click Counter/
Redirector
Link |
| Browser must always end up at
final destination URL | Yes | Yes |
|
It is critical that clicks
always go through immediate
destination URL, even with
JavaScript-disabled browsers | Yes | No |
|
Final destination URL may be
right-click copied and pasted | No | Yes |
|
When JavaScript is turned off, the
browser's status bar displays
the final destination URL when
mouse hovers over the link | No | Yes |
|
When JavaScript is turned off, a
click sends the browser to the
immediate destination URL before
the final destination URL | Yes | No |
|
Immediate and final destination
URLs can be determined by
viewing the source code | Yes | Yes |
Both methods of hiding links are presented in this article,
one for links with priorities like the "affiliate link"
column and one for links with priorities like the
"click counter/redirector link" column.
First, let's address each item in the table.
Browser must always end up at final destination URL:
This must happen, else there would be no point in having
a link.
It is critical that clicks always go through immediate
destination URL, even with JavaScript-disabled browsers:
This is a critical priority for affiliate links. If they
don't go through your affiliate link, you don't get the
commission. For click counter/redirector links, it might
not be so critical.
Final destination URL may be right-click copied and pasted:
For affiliate links, you want them to copy the affiliate
URL, not the final destination URL. Otherwise, you don't
get paid. With a click counter/redirector link, on the other
hand, it might not be so critical.
When JavaScript is turned off, the browser's status bar
displays the final destination URL when mouse hovers over
the link:
Without JavaScript, the status bar displays whatever URL
is in the A tag's href attribute. For the "affiliate link"
method, it is the immediate destination URL. For the "click
counter/redirector link" method, it is the final destination
URL.
When JavaScript is turned off, a click sends the browser to
the immediate destination URL before the final destination
URL:
Without JavaScript, the browser goes directly to the URL in
the A tag's href attribute — the immediate destination
URL for the affiliate link method and, for the click
counter/redirector method, the final destination URL.
Immediate and final destination URLs can be determined by
viewing the source code:
Neither method hides the URLs in the source code. If your
situation demands that the user is unable to determine the
final destination URL before clicking the link, then don't
use any of the hiding techniques presented in this article.
"Hiding an Affiliate Link" Method
Situation: When a mouse hovers over an affiliate link, the
affiliate link URL will display in the browser's status bar.
It's a quick way to determine whether or not a certain link
is an affiliate link.
Solution: Causing the final destination URL to appear in
the status bar, instead of the affiliate link URL, hides the
fact that it is an affiliate link. When the link is clicked,
site users end up at the very URL they expect, the URL they
saw in the browser's status bar.
Here is how to do it.
In the following code, replace __A__ with your affiliate
link URL, replace __B__ with the final destination URL, and
replace __C__ with your link text or image.
That's all there's to it.
Notice that the onmouseover and onmouseout attributes both
contain a return value of true. This is necessary in order
to print the custom information in the status bar. Without
the true values, the attributes have no visible effect.
When the mouse hovers over the link text or image, the
status bar displays the final destination URL (__B__).
When the mouse leaves the link, the status bar goes blank.
For non-JavaScript browsers, the status bar displays the
affiliate URL (__A__).
Whether or not JavaScript-enabled, browsers use the
affiliate URL (__A__) when the link is clicked.
Right-clicking on the link and using "Copy Shortcut" or
"Save Link As..." or similar, puts the affiliate URL (__A__)
into the clipboard ready for pasting.
"Hiding a Click Counter/Redirector Link" Method
Situation: When a mouse hovers on a click counter/redirector
link, the click counter/redirector link URL will display in
the browser's status bar. One can quickly see whether or not
one's click activity is being measured.
Solution: Causing the final destination URL to appear in the
status bar instead of the click counter/redirector link URL
hides the fact a click counter/redirector is being used.
When clicking, site users end up at the URL they expect.
Here is how to do it.
In the following code, replace __A__ with the click
counter/redirector URL and, like before, replace __B__
with the final destination URL and __C__ with your link
text or image.
I'll explain how it works in a moment. First, let me
mention that you only need the JavaScript within the
script tags once on your page, even if you are hiding
more than one click counter/redirector URL. The same
JavaScript can serve any number of links on the page.
Whether or not browsers have JavaScript enabled, the
status bar will display the final destination URL (__B__).
Right-clicking on the link and using "Copy Shortcut" or
"Save Link As..." or similar, puts final destination
URL (__B__) into the clipboard ready for pasting.
When a browser does not have JavaScript, clicking on the
link will take it directly to the final destination
URL (__B__).
Here is what happens when the link is clicked with a
browser that has JavaScript turned on:
-
The click calls function Redirect(), sending it
the click counter/redirector URL.
-
An event is set up for half a second in the future.
(The event will send the browser to the click
counter/redirector URL.)
-
The function returns a value of false. (This causes
the browser to abort the original click.)
-
Half a second after the click, the event previously
set up kicks in and sends the browser to the click
counter/redirector URL.
In effect, the JavaScript switches the final destination URL
with the click counter/redirector URL at the moment the link
is clicked, sending the browser to click counter/redirector
script.
The click counter/redirector script, it is assumed, will
redirect the browser to the URL of the link users clicked.
Choosing a Method
Which method you decide to use will depend on what your
priorities are.
Decide which item on the table has the highest priority and
use that as a guide. For example, if clicking on the link
must always send the browser to the immediate destination
URL, the "affiliate link" method would be the one.
If one "must" is in one column and another "must" is in the
other, then neither of the methods in this article will do
the job for you. For many implementations, however, one or
the other will do the job nicely.
Question:
Did you find this article interesting and understandable? How can it be improved?
Your response is anonymous.
When done typing, click anywhere outside the box. [more info]
Will Bontrager
©Copyright 2006 Bontrager Connection, LLC Bontrager Connection, LLC
Please note:
Articles on this website are presented "as is". However -
If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.
