How do Google and Yahoo replace the URL in the browser status bar?

Question

On the Google and Yahoo search pages, the URLs of the 10 search result links actually point to google.com or yahoo.com. The URLs have extra arguments that allow google.com or yahoo.com to redirect to the actual search result when the link is clicked. When the user mouses over the link, the search result URL (and not the google.com or yahoo.com URL) is displayed in the browser's status bar.

I'm wondering how they do that.

Many years ago, this would have been accomplished by having some javascript that sets window.status, but that doesn't seem to work anymore, as is explained by Reliable cross browser way of setting Status bar text

I have a link that looks like this: <a href="http://somedomain.com/ReallyLongURLThatShouldNotBeSeenInTheStatusBar" onmouseover="window.status='http://niceShourtUrl.com/'" onmouseout="window.status=''">Click Me</a>

This link tried to use the window.status strategy, but it doesn't work. How do I fix this link so that it acts like the links on Google's and Yahoo's search result pages? In this example, I want "http://niceShourtUrl.com/" to be displayed in the status bar when the user mouses over the link.

Answer 1

It's hard to read the source, but you will see that in fact the URLs (in the <a> tags) are the correct destination URLs, which is why the browser's status bar shows the correct URL (instead of the tracking link that it redirects you through when you actually click). There is then some onclick JavaScript that can then intercept the clicks before the browser's default action (following the link) can take place.

Answer 2

Google has onMouseDown handlers on every link that change the link from the original source pointing towards Google redirect. So onmousedown replaces the link and when onClick appears (shortly after the onmousedown) the link is pointing already to somewhere else than the original direction.

Step 1. User clicks on a link (mouse button is down)

Step 2. onMouseDown event triggers

Step 3. link target (a href value) is altered

Step 4. Mouse button comes up

Step 5. onClick event triggers

Step 6. Browser sees that a link was clicked and forwards the user to the desired destination (set by an already altered href value)

Step 7. Browser opens a Google redirect page and this forwards the user to the original destination

Updated: Google used to track clicks on an onmousedown event only and didn't alter the link destination. When a mouse button was pressed on a link an image loading request was made towards google servers which counted the click (onmousedown => new Image("coogle.counter.server.com/link=www.pressed.com")) but I guess it was misused or it wasn't reliable enough that they decided to use the current link altering technique.