I am learning JS currently with a js book. A rollover effects example got me, so I need some help.
I upload a snapshot on Flickr.com. The url is : http://www.flickr.com/photos/58745632@N05/5389380030/
The left side of the snapshot is the page and the right side of the snapshot is the javascript code. My question is can I change the content in the red box to the codes in the green box. If I can, why does the author bother to add this line "thisLink.imgToChange = thisImage"? And what is the relationship between "thisLink.imgToChange" and "thisImage"? Are they the same one or are they identical ones? Could someone explain it for me? Thank you very much.
thisImage is the reference to an image object. It is being passed as a variable to the function.
An image object has properties like the source (.src), .width. height etc.
thisLink is also an object, and it can have properites too. So, thisLink.imgToChange = thisImage sets the "imgToChange" to the image fed into the function. imgToChange is a completely arbitrary property chosen by the programmer. It's being used stash some data used later.
All this code demonstrates the "hard way" of doing a rollover. Having to type (or even use) "document.getElementById" over and over again all of this is a pain. Most of the time we depend on scripts to automate these things.
Frameworks, which are basically optimized versions of the type of code you're working on here, were developed to take care of the dirty work. The most popular framework, by far, is jQuery.
Doing pretty well the same thing using jQuery can be done in one line of code.
Here's another posting as an example.