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.
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).