Mouse over here!
Some of the first interesting things you can do with JavaScript are event-driven. Event
driven means that a particular action causes something to happen. JavaScript has clicks that
can detect events such as OnClick, onMouseOver, onMouseOut. This page illustrates the
mouse over and mouse out events.
Notice that the # means this page to HTML and so setting the HREF to the # means stay on
the same page. You can also use the name of the current page.
Now looking at the construction of the command. Note that onMouseOver should be written
exactly that way because of case sensitivity issues. In the first example, I am saying
the mouse rolls over the words Mouse over here!, then the alert box will come up with the
message that says Testing mouse over. Notice the use of the double quote, single quotes,
parenthesis and semi-colon. Inside the double quotes is the JavaScript command which
should end with a semi-colon. What we are doing is putting the JavaScript inside the
quotes of an event. The event is onMouseOver. The alert needs a message and the message
inside parenthesis and enclosed in single quotes. If you have quotes within quotes the
inner quotes must be single to differentiate. The alert() function puts the message in
the () inside the message box. Note that all functions in JavaScript have the form
functionName() where sometimes the parenthesis contain data and sometimes they are empty.
We will see more of this in later examples. Note one last thing that has nothing to do
with JavaScript, because I wanted to Mouse over here! to be large and aligned to the right,
I used the paragraph to align to the right and the font to change the font. These
are not needed for the JavaScript.
On the next example, I am using both onMouseOver and onMouseOut. I went into PhotoEditor
and did a invert with the CISa.gif image and saved it as CISb.gif. Then I can have one
image show when the mouse rolls over the image and a second image show when the mouse rolls
out.
When I work with an image, I need to be aware of the fact that frequently browers will not
let the developer put events inside image tags. So what you have to do is set up the HREF
equal to # and put the events inside that and then set up the image source with name as
shown above. When the image is firstloaded it will show the image in IMG SRC which in this
case is CISa.gif. When the mouse goes over that same image is shown. When the mouse goes out
a different image is shown (in this case the inverted image).
The dots in document.CISimage.src have special meaning to JavaScript. It will go
to the last dot and work backward in the interpretation. So this essentially reads as
change the src of CISimage which is in the document. This follows a document
object model hierarchy (DOM) which can be referenced in many tutorials on JavaScript.
To make things more efficient you can preload the images. I will illustrate a preload in
another example.
One other thing to note - because single and double quotes have special meanings, you cannot
use them in the ordinary way in your text. If you want to use the quotes in your text you
do it with Jane\'s where the \ tells JavaScript to use the single quote instead of interpreting
it.