Change link in status bar

Question

I'm looking for a way to change the link in browser status bar similar to what google and yahoo are using to display their search result. Here is my sample code

<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 </head>
<body>

<script type="text/javascript">
$(document).ready(function() {
  $('a').attr('orig_href', function() { return $(this).attr('href') })
    .attr('href', 'http://www.google.com')
    .click(function() {
        window.location.href = $(this).attr('orig_href');
        return false;
    });
});
</script>

  <p id="hello">Hello World</p>

  <div><a href="http://www.stackoverflow.com/">Link 2</a></div>
  <div><a href="http://meta.stackoverflow.com/">Link 3</a></div>
</body>
 </html>

When the mouse is hovered over the links, the status bar is http://www.google.com all the time. However, this is not the true url. When we left-click on a link, the browser will bring to the true url (for example, stackoverflow.com). This is what i expected.

The problem is, when we right-click and open the link into a new tab, browser will bring us to the wrong url , that is google.com.

Could anyone point out what should be done so that when open in a new tab, it will go to the true url (stackoverflow.com) ?

Thank you very much.

possible duplicate of [How do Google and Yahoo replace the URL in the browser status bar?](http://stackoverflow.com/questions/2813648/how-do-google-and-yahoo-replace-the-url-in-the-browser-status-bar) — Szymon Toda, Mar 14 '14 at 14:42
@Ultra I did read that link, but because my understanding is limited, i could not get anything useful to this problem. Thanks — aye, Mar 14 '14 at 14:51

score 1 · Accepted Answer · answered Mar 14 '14 at 14:53

1

try this :

<a href="http://meta.stackoverflow.com/" onmouseover="$(this).attr('href', 'http://www.google.com')" onmousedown="$(this).attr('href', 'http://meta.stackoverflow.com/')">Link 4</a>

maybe not the best solution but this work (unfortunatly not on JSfiddle).

answered Mar 14 '14 at 14:53

jmoyson

146
6

1

You are brilliant! It works perfectly on my Firefox and Google chrome. Thank you very much – aye Mar 14 '14 at 14:58

sitilge · Answer 2 · 2014-03-14T14:43:11.283

0

Why do you need JQuery to override the href attributes? Remove script tags and you should be good to go!

edited Mar 14 '14 at 14:43

answered Mar 14 '14 at 14:37

sitilge

3,687
4
30
56

Thank Martins for answering my question. The down vote is not from me, just for clarification. The solution by MarOnii works for me. Thank you again:) – aye Mar 14 '14 at 15:00

Brandon Knight · Answer 3 · 2014-03-14T15:04:24.450

0

$(document).ready(function() {
  $('a').attr('orig_href', function() { return $(this).attr('href') })
    .attr('href', 'http://www.google.com')
    .mousedown(function() {
        $(this).attr('href', $(this).attr('orig_href'));
        return false;
    });
});

Okay try this, sorry I misunderstood the question.

edited Mar 14 '14 at 15:04

answered Mar 14 '14 at 14:46

Brandon Knight

532
1
4
14

when i replaced it, the problem is remained the same. Thanks. – aye Mar 14 '14 at 14:54

Change link in status bar

3 Answers3