Before we get into more advanced Java Script topics, I am going to take this time to go over some of the events used in Java Script. Some of these we have used, but some we have not. One very common event used in Java Script is the onMouseOver event. As the event implicates, this happens whenever the mouse moves over an object or element in a web page (such as a link).
This page is going to use some images. You can download them by right-clicking the animations you see below and selecting Save Image As.
|
|
|
To make this exercise easy, make sure that you save these images in the same folder as the html file you write the code from this page in.
Set up a new HTML document like so:
<html>
<head>
<Script Language = "JavaScript">
<!--
// -->
</script>
</head>
<body>
<form name = "frmRollover">
<h3>MouseOver Text:</h3>
<table border="0" width="25%" cellspacing="0">
<tr>
<td width="33%" valign="top">
<a href = "#" onClick = "document.frmMessage.txtMessage.value = 'The link was clicked';"
onMouseOver = "FirstMessage();" onMouseOut = "document.frmMessage.txtMessage.value = 'The mouse is out!';">Message 1</a>
</form>
</td>
<td width="33%" valign="top">
<a href = "#" onClick = "alert('You triggered an alert!');"
onMouseOver = "SecondMessage(); return true;" onMouseOut = "window.status = ''">Message 2</a>
</td>
</tr>
</table>
<p></p>
<form name="frmMessage">
<p><b>Message</b>: <input type="text" name="txtMessage" size="32" onFocus = "document.frmMessage.txtMessage.blur();"></p>
</form>
<p></p>
<h3>MouseOver Image:</h3>
<img src = "7up.gif" onMouseOver = "document.images[0].src = 'sonic.gif'"
onMouseOut = "document.images[0].src = '7up.gif'"
onClick = "document.images[0].src = 'netfire.gif'">
</body>
</html>
Load this page in a web browser. You will notice that this page already has some functionality. This code is currently generating errors, but they are going to be fixed shortly. The numbers on the left are simply the line numbers. Let's start with the java script code first. The first code we have as Java Script appears on Line 23.
Lines 23 - 25: This tag creates a hyperlink reference (href). The # we used in quotes tells the web page go to a bookmark. This tag include the events onClick, onMouseOver, and onMouseOut. This is self-explanatory. When the user clicks the mouse, the onClick event is called. When the mouse is over the link, the onMouseOver event is called. When the mouse leaves the link, the onMouseOut event is called. Let's begin with the onClick event.
As I mentioned, the # tells a hyperlink reference to go to a bookmark. A bookmark is a specific location in a web page. They are defined using a <a name = ""> tag, followed by a </a> tag. Suppose we entered top in the quotes (<a name = "top">). In a hyperlink reference, we can say <a href = "#top">. When this link is activated by being clicked, the page scrolls to the location of bookmark top. We use the "#" character to indicate that we are referencing a named item. So in the case of this page we created, the "#" tells the hyperlink to go nowhere because no bookmark is specified.
The code written for the onClick event is JavaScript. Instead of calling a function as usual, we wrote a single line of code. This code
set the value (the text) of the text box txtMessageto The link was clicked.
The code written for the onMouseOver event calls a function called FirstMessage(). We are going to write these function later between the script tags.
The last event in this hyperlink reference tag is the onMouseOut event. When this event occurs, the code set the text in the text box txtMessage to The mouse is out.
Notice that line 27 closes this form. We use another form in this page on line 40, which is explained shortly.
Line 32: Begin a hyperlink reference to nothing (#). When this reference is clicked, display the alert shown
after the onClick event shown.
Line 33: Adds the event onMouseOver to this link. When the mouse is over this link, call the function SecondMessage(), which
is going to be written shortly.
We need to use the return true statement after it because this prevents the browser from over-riding the status bar. When the mouse is over a link, a
browser's status bar is programmed to display the link location. Even though we tell our Java Script code to display the status bar text we tell it, the browser displays
the link after the text is displayed. Therefore, we never see the text we specify displayed. So basically, the return true statement tells the status bar to use
our command as the true value for the status bar, which overrides the browser's default text as the link.
Notice that line 40 begins another form named frmMessage.
Lines 42 and 43 uses the event onFocus for the text box txtMessage. The Java Script code blurs (takes the focus away) the text box by using the code document.frmMessage.txtMessage.blur();. This is a simple trick that can be used to make a text box un-editable.
Lines 50 through 52 put the image 7up.gif I provided at top of this page onto the web document. This image tag uses the onMouseOver event to change the image when the mouse is over it. The other events used are onMouseOut and onClick. The line document.images[0].src set the source of the image. The index between the brackets in this command after images specify which image on the web page to change. The index is determined by the <img src> tag. The first tag used in the document uses index 0, the second occurring tag uses 1, and so forth. In this case, we want to change the first image on the web page, so we use index 0.
Now we are going to code the functions used in this page.
Between the script tags, enter the following lines:
function FirstMessage()
{
document.frmMessage.txtMessage.value = "This is the first rollover message";
}
function SecondMessage()
{
window.status = "This link displays text in the status bar when the mouse is over it";
}
The function FirstMessage() sets the text in text box txtMessage to "This is the first rollover message
".
The function SecondMessage() sets the text in the browser window's status bar to "This link displays text in the status bar when the
mouse is over it".
Test out your page. It should have the following functionality:
When the mouse is over the link Message 1, the text in the form field changes.
When the mouse leaves the link Message 1, the text changes again.
When the mouse clicks the link Message 1, the text changes again.
When the mouse is over the link Message 2, the text in the browser's status bar changes.
When the mouse clicks the link Message 2, an alert is displayed.
When the mouse is moved over the image, a different image is displayed.
When the mouse clicks the image, a different image is displayed.
When the mouse leaves the image, the original image is displayed.
Hopefully, your page works as the list above displays. Keep these animations on your system for now. I am using them on the next page for another lesson. I hope you enjoyed this lesson in mouse events. Now you may continue to Page 13.