How does google "change background image" link work ?

Question

When I look the source of this link, there is just this function

javascript:void(0)

and there is nothing else, I looked for usage of javascript:void(0) but there is not much place where it is used alone. So what is the secret ?

Answer 1

Somewhere else there's a javascript function which attaches to the onclick event. Here's an example with jquery:

$('#linkid').click(function() {
    window.location.href = 'http://yahoo.com';
    return false;
});

So it is possible to attach javascript actions to DOM elements. Those javascript functions can be located in some other files that are included which are obfuscated, so don't be surprised that you don't find it. A good tool such as FireBug could help you debug through JS code.

Answer 2

Indeed, jQuery adds a onclick event somewhere. In Chrome, right click the link and choose Inspect element. In the bottom right, there should be a section at the bottom called Event Listeners. That will show you what is going on.

Answer 3

var a=document.getElementById("cpf")

The div surrounding the link has an id of 'cpf'. The bit above references that. Search for 'cpf' and you'll see one other reference. I haven't analyzed how the JS works, but this is likely how the anchor tag is referenced.

Edit:

I use the Web Developer toolbar for Firefox to look at the JavaScript on a page, with a little less hassle.

Answer 4

From the source:

<div id=cpf style="display: none; margin: 0 8px; position: relative;"class=fade><a href="javascript:void(0)" style="bottom: 0;display:inline;font-family:arial, san-serif;font-size:small;left:0;position:absolute;">Change background image</a></div>
.....
var a=document.getElementById("cpf");
.....
var c=a.getElementsByTagName("a")[0];
if(!c.onclick)c.onclick=function(){
var d="https://www.google.com/accounts/ServiceLogin?continue\x3dhttp://www.google.com/webhp%3Fhl%3Den%26cplp%3D\x26hl\x3den\x26service\x3dig\x26ltmpl\x3daddphoto";
.....