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.