How to hide actual URL in the status bar of all browsers?

Advertisement

Yesterday, Jacob mailed me and asked me how can I show different text or link in the status bar of browsers like Firefox or safari when mouse is over the link.He found the technique which only worked for IE but not for other browser but I’ve come up with a technique which works for all browser. This kind of technique is quite useful if you want to hide the actual link in status bar of browsers and show the different URL instead of actual one.

Old technique to display hide actual URL  in the status bar

If you search in google with the keyword change status bar text , you’ll find that many codes in different websites which are using window.status to change the text of the status bar while mouse is over the link. For example,

<a href="http://www.sell.com/?referrer=225" onMouseOver="window.status='http://www.sell.com';
return true" onMouseOut="window.status=''">Click here </a>

The above link displays “http://www.sell.com” instead of “http://www.sell.com/?referrer=225″ in the status bar when mouse is mover the hyperlink. But, the main drawback of above code is that it only works in Internet Explorer(IE) . It doesn’t change the status bar text of the link in any other browsers like “Firefox”, “Safari” etc.

How to display diferent URL of links in status bar of Firefox , Safari etc ?

To change the satus bar text of the the link in firefox and safari you’ve to just use a small technique with the help of “href” and “Onclick” attribute of the hyperlink. Let’s look at the this technique step by step,

  1. First, make a javaScript function and define it exactly as below,
        <script language="javascript" type="text/javascript">
         function redirect(URL)
         {
           document.location=URL;
           return false;
         }
        </script>
  2. Now, define the hyperlink with the status bar text in href attribute and call the above function from onClick attribute of the link like below,
    <a href="http://www.sell.com" onclick="return
    redirect('http://www.sell.com/?referrer=225');">Click here</a>

As we know the we see the text in status bar which is defined in the href attribute of the hyperlink. And when you click the link, code within onclick event of element is called. We’ve taken the benefit of this phenomenon to show the different text .

But remember, this technique also have a drawback as it doesn’t work if JavaScript is diabled in the web browsers. In that case, the browers will be redirecteed to URL in the href attribute. If you worried about disabled JavaScript then you can check this post to knnow how to handle disabled JavaScript in browser.

Popularity: 13% [?]

Enter your email address and get free tutorials, tips and tricks of PHP, Ajax, JavaScript and CSS directly delivered to you email inbox:

Related Posts

» Making dashed or dotted link using CSS
» Custom Error Page with .htaccess
» Table row manipulation using jQuery JavaScript
» Changing textbox value from dropdown list using Ajax and PHP

27 Comments on “How to hide actual URL in the status bar of all browsers?”

  • stratosg wrote on 9 August, 2008, 22:10

    this is a smart trick ;) nice post!

  • Roshan wrote on 10 August, 2008, 17:42

    Thanks stratosg….

  • Binny V A wrote on 12 August, 2008, 18:25

    I have written a post on the multiple methods to Hide the Target URL of a Link in Status Bar

  • Roshan wrote on 13 August, 2008, 4:25

    @Binny V A – Thanks for sharing the link and technique

  • James wrote on 13 August, 2008, 11:19

    Nice trick! It gives me an idea of doing a onmouserover event that will change the status bar text using string function that strip the other part that doesn’t want to be shown? Much easier to implement to all links ins’t?

  • Ali wrote on 14 August, 2008, 6:52

    but i want to do the same upon any form, i mean when the user rollovers the submit button it should not show the redirected page’s address and after the submission of form it should not display the link of that page in the address bar…can you help me???…plzzzzzzzzzzzzz

  • Dwayne Charrington wrote on 15 August, 2008, 3:53

    This is a genius idea. It’s so simple, yet it works. JavaScript is such a handy vice in hacking away at all browsers. Sickens me to see that people complain about people disabling Javascript. What’s the point in disabling it considering that most sites use it these days?

  • Tarquin wrote on 4 September, 2008, 6:43

    I believe href=” ” or “#” with a onclick works aswell,

    thanks for this though, its much cleaner

  • Roshan wrote on 4 September, 2008, 10:45

    @Tarquin – yes you can do that but it doesn’t show the different URL or fake URL you can just see the ‘#’ in the status bar

  • Tarquin wrote on 4 September, 2008, 11:58

    Yea fair enough, this script is especially useful for click trackers, most definatly going to use it.

    Again thanks :)

  • Joe wrote on 14 January, 2009, 16:32

    This does NOT WORK, the link still shows up in firefox, what am i missing here

  • Joseph wrote on 22 February, 2009, 23:08

    Hi my brothers
    Is there a way to do this via CSS?

  • Harry Johnson wrote on 12 March, 2009, 5:29

    I tried placing this code in a post on my blog and while the status bar url rendered nicely, it didn’t redirect to the desired URL destination. Can you imagine what might have happened? Does it work in WordPress?

  • John wrote on 15 March, 2009, 2:07

    This is not working for me. It is just sending people to the href, not to the redirect: Checked javascript and correctness of link, but when reviewing the referrer (redirected) hits nothing is registering.

  • John wrote on 25 May, 2009, 15:15

    Hey, thanks for this. I was looking for this code!

  • Raj wrote on 25 May, 2009, 23:47

    Hi..This piece of information is very useful…Could you please let me know how to hide URL in address bar. In which ever page the user is currently in, it should show the default page address in URL.

  • Will wrote on 13 June, 2009, 11:19

    This is a great piece of code! I have been using the old method for a while now. Thanks Binny also, you have wrote up an excellent codes as well.

  • arno wrote on 4 July, 2009, 0:47

    its not working with firefox 3.0 :-/

  • Optimizacija sajta wrote on 23 October, 2009, 14:18

    This is what I have been searching for. Thanks

  • raynor wrote on 16 December, 2009, 4:12

    :D
    its not working with firefox 3.5

  • Mehedi Hasan wrote on 30 December, 2009, 14:11

    Thanks for sharing… :)

  • chat2learn wrote on 30 December, 2009, 20:08

    hi,

    a nice solution about this issue is posted here

    http://www.php24hours.com/how-to-hide-url-in-status-bar-t160.html

  • Rajeshkumar wrote on 29 January, 2010, 5:29

    Hi Roshan,
    Ur posts are Fantastic and it helped alot to me.

    Thanks Roshan

  • Mohammed wrote on 24 February, 2010, 10:30

    It works for me .. Thank’s

  • Nicholas Maietta wrote on 18 July, 2010, 21:42

    This is such a nice solution i will be adding this into core as a supported option in my CMS framework solution. Thank you.

  • Ndi Rustandi wrote on 16 August, 2010, 17:30

    worth it,,, this trick…

Trackbacks

  1. pligg.com

Write a Comment

 


Copyright © 2014 Roshan Bhattarai's Blog. All rights reserved.
Powered by WordPress.org, Custom Theme and ComFi.com Calling Card Company.