Mouse over here!
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,
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
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
I used the paragraph to align to the right and the font to change the font. These
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
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).
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
To make things more efficient you can preload the images. I will illustrate a preload in
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