I have a simple question, how can I hide a link in the status bar in my browser.

I've tried with this:

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

(Taken from a tutorial) But it doesn't work, if somebody would help me, I would be very happy! ;-)

I have a simple question, how can I hide a link in the status bar in my browser.

I've tried with this:

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

(Taken from a tutorial) But it doesn't work, if somebody would help me, I would be very happy! ;-)

• javascript
• html
• statusbar

• You can do id if you allow it in your browser. Which browser do you have? – Eir Nym Commented Nov 30, 2010 at 14:56
• @EirNym chrome. How can I do it? – larry909 Commented Nov 13, 2019 at 13:45

6 Answers 6

You can't (at least in current browsers), which is a good thing. It would help phishing attacks a great deal to disguise the link.

Here is some code that will hide your original link tread text in a browsers status bar area

Please note: not sure which browsers it works on but works fine in IE9

<a href="javascript:void(0);" onclick="location.href='http://www.google.com';return false;">If You Put Your Mouse Over This Text You Won't See Link In Status Bar Area</a>

When you run your mouse over the link, all you see in the status bar is javascript:void(0);

Since you are asking to do this in order to hide affiliation links, there may be a better way.

It makes far more sense to loop through all your links, say, under a broad $("a.out") selector, then get and store their real href into element storage, replace it with a dummy one (and the title attribute if you have to).

You then attach a click event handler that stops the default event, reads back the original href and sets it as the location.href, effectively disguising the links to all that have js enabled.

Eg code in mootools:

(function() {
    var links = document.getElements("a.out");

    links.each(function(el) {
        // save original
        el.store("href", el.get("href"));
        // replace it.
        el.set("href", el.get("data-link"));

        el.addEvents({
            click: function(e) {
                e.stop();
                // console.log(e);

                document.location.href = this.retrieve("href");
            },
            contextmenu: function(e) {
                e.stop();
                // do something on right click so we dont get caught
                alert("hi");
            }
        });
    });
})();

Which works fine on this markup:

<a href="http://www.energyhelpline.com/energy/rg_home.aspx?aid=107" rel="nofollow" class="out" title="Enegry savings" data-link="http://www.energyhelpline.com/">Swap Energy Provider</a><br />

<a href="http://www.moneysupermarket.com/link.asp?Source=MSE&Section=utils" rel="nofollow" class="out" title="Money supermarket" data-link="http://www.moneysupermarket.com/">Money Supermarket</a>

With data-link containing what we SHOW to end users instead.

You can set the text of the status bar using javascript with window.status attribute. E.g. http://www.htmlite.com/JS017.php

If you REALLY need, to disable the status bar in a browser, you can get a copy of an open-source browser code base, remove all code for the status bar and redistribute it to your users, but I doubt this is what you mean/need.

Why do you need to hide the link in the status bar? A security issue with not wanting to expose the URL could be dealt with in another way.

You can do this by using javascript for your link:

Here's how:

function goToBing() {
  window.location.href = "http://bing.com";
}

and

<a href="http://google.com" onclick="goToBing();return false;">Link to Google</a>

As Nick Craver said, this doesn't work in all circumstances (control-click, middle-click etc.) but should work for you, because you don't relay on the javascript link.

Here's a way with javascript + jQuery that works with ctrl click, shift click, middle click, etc. It does break right click, but if the goal is to hide the link I guess that's not a big deal.

I take no responsability whatsoever what you do with this though, I did this mostly for fun, but it does look pretty evil.

JS:

$(document).ready(function() {
   $('a').each(function() {
       var address = $(this).attr('href');
       var element = $(this).contents().unwrap().wrap('<div/>').parent();
       element.data("hrefAddress", address).addClass("link");

       element.click(function() {               
           var newWindow = window.open(element.data("hrefAddress"), '_blank');
           newWindow.focus();
       });
   });
});​

CSS:

.link {
    color: #00f;
    text-decoration: underline;
    cursor: pointer;
}

.link:hover {
    color: #00a;
}

HTML:

<div>
    <a href="http://www.facebook.com">Facebook</a>
    <a href="http://www.bing.com">Google</a>
    <a href="http://www.yahoo.com">Yahoo</a>
    <a href="http://stackoverflow.com">Stack Overflow</a>
</div>​

JS Fiddle