| The button
changes from green to red and back as your mouse pointer moves over
and out of the image. Actually, it is not only the color of
the button that changes, but the image of the button
itself.
For some reasons, the examples on this page does not
work with Netscape browsers. I believe that for the two
examples on this page to work, the images must be links or
references to URLs for Netscape browsers to pick-up the
events. This is not an endorsement for Internet
Explorer. I have both Netscape and Microsoft browsers on my
laptop. It just happened that I only tested this page with
Internet Explorer. If you know how to make the events work in
Netscape browsers, without making them links.
The page actually contains the images of
two buttons that look the same except for their colors, one green
and one red. When the mouse moves over the image, the green
button image is replaced by the red button image. When the
mouse moves out of the image, the green button image is returned,
creating the illusion that the button changes color when the mouse
pointer moves over it.
That was pretty simple, but how does it
work? Here is the little bit of code that makes the button
changes color:
< img
src="images/greenbutton0.gif"
onMouseOver=" document.images[1].src='images/red_button0.gif';return
true;"
onMouseOut=" document.images[1].src='images/greenbutton0.gif';return
true;" width="25"
height=" 19">
Notice the
"onMouseOver=" and "onMouseOut=" parts of the HTML?
onMouseOver and onMouseOut are known as EVENTS. The reason
that they are called events is because they tell your browser what
to do in the "event" that a mouse pointer passes over your picture,
and what to do in the "event" that a mouse pointer moves out of
it.
The action that
is to be taken place when the an event occurs is put in double
quotes and what goes inside the quotes, in this case is Java
Script.
Notice that in
our example, the Java Script inside the quotes both started with
"document.images[1].src='path of picture'". If you think of
"document" as your your web page, "images" as the pictures in it,
and "src" as the source of your picture or where it comes from then
you won't need much more to underderstand our example.
Because what we
really want to do when a mouse pointer passes over our image is to
change the way it looks by displaying another picture in its place,
we need to concern ourselves with the source of the picture,
therefore "src". Since the "src" we are talking about is the
source of a picture or image, therefore "images". Now we have
"images.src". But there is a small technicality here. We
want to change only the picture that the mouse pointer is passing
over and not that of any other ones, so now we must specify which
one.
Instead of
"images.src", now we specify "images[n].src", where n is the "n"th
image on the page. In our example above, n=1, because the
green button image is the second one on our page.
The first is the
"CentralStation" logo. If you did want to refer to Central
Station's logo, then n=0. In computer land, "0" (zero) usually
represents the first element in a set. This is why the image
source to the first image is referenced as "images[0].src" and the
image source to the second image is referenced as
"images[1].src".
To make it clear that the
image we are talking about is an image on the current web page or
document, we append "document" to the front of
"images[n].src".
In order to swap our current
image out with another image, we use the equal sign "=", and the
path of the new picture in quotes, single quotes this time.
Single quotes are used when you need to specify quotes within quotes
so as not to confused the browser.
For now, we want to terminate
our actions with a Java Script's "return true"
statement.
Lastly, a semi-colon is
required to separate the Java Script statements from all sticking
together, and make it possible for the browser to interpret them
successfully.
Here is another way to use the
Java Script statements that you just learned.
| 
