When I hover over a url in Chrome, the url is displayed in the Chrome status bar. In my case this results in an ugly javascript:bla-bla-bla reference. Is there any way to change the contents of the status bar when you hover over a link?

Thanks

When I hover over a url in Chrome, the url is displayed in the Chrome status bar. In my case this results in an ugly javascript:bla-bla-bla reference. Is there any way to change the contents of the status bar when you hover over a link?

Thanks

• javascript
• html
• url
• google-chrome
• statusbar

6 Answers 6

Although you selected your answer, this idea is an alternative.

You can change the href attribute on mouseover to affect what the status bar says, and change it back on mouseout or click:

function showNiceLink(el, e) {
  e = e || event;
  el.originalHref = el.originalHref || el.href;
  console.log(e.type);

  if (/click|out/i.test(e.type)){
    el.href = el.originalHref;
  } else {
    el.href = "http://Linking...";
  }
}

<a href="#this is a really UGLY link @1##$$%!!&"
   onmouseover="showNiceLink(this,event)"
   onmouseout="showNiceLink(this,event)"
   onclick="showNiceLink(this,event)">a link with an ugly <code>href</code></a>

I'm pretty sure for security reasons this isn't possible in any browser. Otherwise links to phishing sites will become much, much harder to detect, because attackers can then just place a genuine URL in the status bar while the dangerous link actually leads elsewhere...

Use an onclick event handler for your hyperlink instead, and put a real, meaningful URL in the href attribute in place of the javascript: link (even if the link is meant to be used only with JavaScript).

<a href="#" onClick="yourFunc(); return false;">Your "link"</a>

I guess you mean you want to change what destination is shown for link that is selected? In that case you most likely should put nice url in href attribute, and use onclick attribute for your javascript. Not sure that you can duplicate everything what is done by putting javascritp in href.

Assuming this is what you have:
<a onClick="blabla">Link</a>
Add href="#" to it. Then the # should be shown in stead of the javascript:blabla.
So that would be like this:
<a href="#" onClick="blabla">Link</a>

It is definitely possible to achieve the desired effect. Just look at what Google puts in the status bar of its search results.

However, you need to use some kind of a trick, e.g. onclick like BoltClock suggested.

Google shows you what you would like to see - a plain, clean URL. Underneath, however, they use a long redirect URL with monitoring parameters to track you down as you click any result link. That way Google monitors which of the search results are clicked on and which are not.

Unfortunately, most people do not realize that. Quite frankly, I would be very glad to see a browser extension which takes all this dirty tricks down and replaces "tracking" URLs with the "real ones".