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 related to XHTML. In regular HTML, it was written as onMouseOver. 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.