Q:

Change image source on thumbnail click with jQuery

I'm creating something like a gallery when clicking on a thumbnail should load the corresponding big image. 
The way I try to do this is the following.  
There's an image tag as follows:
<img src="gallery/[image name]" id="bigitem" />

The thumbnail is as follows:
<img src='gallery/thumbs/[image name]' alt='' at='[image name]' onclick='changePicture()' />

The thumbnail image name and the big image name is the same and the custom "at" attribute contains the same image name.  The changePicture() function is as follows:
function changePicture() {
        var at = $(this).attr('at');     // getting the value of the "at" attribute of the thumbnail
        var newpath = 'gallery/'+at;
        $("#bigitem").attr('src', newpath);   // changing the "src" attribute of the big image. 
        }

However this function does not work.  Seems that I can't get the custom attribute value of "this". 
Could anybody help me to figure out why this happens? 
Thanks. 

A:

That's because this isn't what you think it is; in that context this is the window object.  You need to pass this to the onclick function:
<img src="gallery/thumbs/[image name]" alt="" 
    at="[image name]" onclick="changePicture(this);" />

function changePicture(image) {
    var at = $(image).attr('at');
    var newpath = 'gallery/' + at;
    $("#bigitem").attr('src', newpath);
}

