Java Reference
In-Depth Information
Save the page as
ch10_example1.html
. You will need four image files for the example, which you can
create or retrieve from the code download available with this topic.
Load the page into your browser. You should see a page like that shown in Figure 10-1.
figure 10-1
If you click an image, you'll see it change to a different image, which is selected randomly.
The first line in the script block at the top of the page defines a variable with page‐level scope. This is
an array that contains your list of image sources:
var myImages = [
"usa.gif",
"canada.gif",
"jamaica.gif",
"mexico.gif"
];
Next you have the
changeImg()
function, which will be connected to the
onclick
event handler
of the
<img/>
elements defined in the page. You are using the same function for the
onclick
event
handlers of both images, and indeed, can connect one function to as many event handlers as you
like. This function accepts one parameter called
that
. It is called
that
because you pass the
this
keyword to the function, which gives you immediate access to the
img
object you click. You can
actually name the parameter whatever you want, but most developers use the word “that” when it
references
this
.
