An event is some action that occurs in a browser.

These actions can be generated:

• by the user, such as moving the cursor around the page or clicking and dragging objects on the page
• by the browser, such as loading or refreshing a page

Events can be combined with event handlers . An event handler is a block of JavaScript code that detects and responds to an event. The code is executed when the event occurs. For example, when a user moves the cursor across an image, this can trigger a dynamic change to the image source so that a new image displays.

Event handlers start with the prefix on; for example, onclick.

Not all events can be used in every tag. Many events are specific to form elements, such as the submit event that occurs when a form's Submit button is clicked.

Every new browser version includes more support for event handlers. Commonly used event handlers include:

• onblur: user changes focus to a different element
• onclick: element has been clicked
• onfocus: user focuses on the element, for example, puts the cursor in a form text box
• onload: document is loaded in a window or frame
• onmouseout: mouse has moved away from an element
• onmouseover: mouse has moved over an element
• onsubmit: submit button has been clicked

You can create interactivity on your pages by assigning a block of JavaScript code to an event handler; for example:

<input id="button1" name="button1" type="button" onclick="showMe()" value="Click Here!">

The event handler is specified as an attribute of the HTML input tag; in this case, onclick is actually HTML, not JavaScript!

To use this on your page, you need both a JavaScript function in a script block as well as an HTML form, as in the following:

<script type="text/javascript" language="JavaScript"> <!-- function showMe() { alert("Here you go!"); } // --> </script> <form id="form1" name="form1"> <input id="button1" name="button1" type="button" onclick="showMe()" value="Click Here!"> </form>

You may have seen event handlers written in camel notation -- in other words, onClick rather than onclick. HTML is not case sensitive, so you can use either one. Event handler names are always lowercase in JavaScript; however, XHTML also requires the lowercase version.

As with the timer example in Lesson 5, you can call a function or you can write the complete code block instead, such as:

<input type="button" onclick="alert('You clicked?')" id="button1" name="button1" type="button" value="Click Here!">

Event handlers can also be used as a JavaScript property, as in the following code:

document.form1.button1.onclick=showMe;

JavaScript dot notation is used to indicate the path through the document tree to button1 and the event handler. In this case, onclick is JavaScript, not HTML. For more information on the document tree, see the section "The Document Tree" later in this lesson.

Image rollovers (also known as mouseovers) were introduced in Netscape 3 and Internet Explorer 4. They have a continuing appeal to Web audiences, and are often used in navigation menus to display a second image when a user rollovers the first image.

In this section, the focus is on image rollovers; however, you're not limited to images and links for mouseover actions. Later in this lesson, you learn to create text rollover effects.

Important points to remember when creating image rollovers:

1. Be sure to give images a name and/or an id -- this is what makes them accessible to scripting. The most frequent error in image mouseover scripting is to forget to include a name attribute in the <img> tag.

<img name="myCat" id ="myCat" 
src="graphics/myCat.jpg" width="200" height="200">

2. The replaced image should be the same size as the original (to avoid page reflow problems in Netscape 4.x)
3. Don't use transparent images unless you want to see through one of the images (in order words, see parts of both images at the same time).
4. After giving an image a name, you can refer to it with JavaScript, for example:

document.images('myCat')

or

document.images.myCat.

5. Remember to include an onmouseout action unless you want the image to stay on display even after the user has moved the mouse off the image target.
6. You can create a function for the onmouseover action, and call the function in this way, for example:

<a href="myCats.html" onmouseover="rollIt('myCat')">;

7. Preload your images, so there's no delay when the user mouseovers the original image. You can do this with a block of code similar to this:

var Image1On = new Image();
Image1On.src = "graphics/image_1_on.gif";
var Image1Off = new Image();
Image1Off.src = "graphics/image_1_off.gif";

and so on for any images involved in mouseovers. Include this code in a script block in the head section of the page so that the images start preloading as soon as possible.

Remember to use the variable name when you create the event code, not the URL; for example, use:

onmouseover="document.myCat.src=myCatOn.src"

instead of

onmouseover="document.myCat.src=graphics/myCat.jpg"

Otherwise, you'll have image loading problems in Internet Explorer (it'll redownload the image every time there's a mouseover event).

8. Finally, to do multiple rollovers (in other words, change more than one thing for one mouseover event), follow the previous steps, but add a semicolon and then a second event action, similar to the following:

<a href="rooms.html" 
onmouseover="document.picField.src=tile1.src;
document.nav1Img.src=accomOn.src"
onmouseout="document.picField.src=outside.src;
document.nav1Img.src=accomOff.src">

The first step in creating image rollovers is to create the images you want to use. Figures 6-1 and 6-2 show two simple images that are 100 pixel squares of a solid color. You can save these two images from this Web page (right-click, and then Save Picture As ) or create your own images in your favorite image-editing program.

Figure 6-1 shows the red square.

Figure 6-1: Red square.

Figure 6-2 shows the green square.

Figure 6-2: Green square.

Start by writing the code to preload the images so there won't be any delay to wait for the second image to download when a rollover event occurs.

<script type="text/javascript" language="JavaScript">
<!--
var mySquareOn = new Image();
mySquareOn.src = "green.gif";
var mySquareOff = new Image();
mySquareOff.src = "red.gif";
// -->
</script>

Next, add the <img> tag to the body of the document:

<img name="mySquare" id="mySquare" src="red.gif" 
  width="100" height="100">

Finally, add <a> tags around the <img> tag. Be certain that you have included a name attribute in the <img> tag or this won't work.

<a href="#" onmouseover="document.mySquare.src=mySquareOn.src" 
  onmouseout="document.mySquare.src=mySquareOff.src">

<img name="mySquare" id="mySquare" src="red.gif" 
width="100" height="100" border="0">

</a>

Alternatively, you can call a function from the <a> tag; for example:

<a href="#" onmouseover="rollIt1()"onmouseout="rollIt2()">
<img name="mySquare" id="mySquare" src="red.gif" width="100" 
   height="100" border="0">
</a>

If you use functions for the rollovers, be sure to include the functions in the head section of the page so that the functions are available for use by the time the image displays on the Web page.

One way to create dynamic text effects is to use one of the methods of the DOM (Document Object Model). When you use the DOM, you're manipulating a document tree .

A document can be represented as a tree structure. For example, the following HTML document:

<html>
<head>
<title>My Page</title>
</head>
<body>
<p>My Paragraph</p>
</body>
</html>

can be represented as a tree, as shown in Figure 6-3. The <head> and <body> elements are children of the <html> element, the <title> element is a child of the <head> element, and the <p> element is a child of the <body> element.

Figure 6-3: HTML document tree.

6. THE DOCUMENT OBJECT MODEL

7. DOM METHODS

<p>Here is some text in a paragraph.</p>

<script type="text/javascript" language="JavaScript">
<!--
function tColor() {
var tColor = document.getElementById ("p1");
tColor.style.color= "red";
tColor.style.fontFamily = "Arial";
}
function tColor2() {
var tColor2 = document.getElementById ("p1");
tColor2.style.color= "blue";
tColor2.style.fontFamily = "Times Roman";
}
// -->
</script>

<p id="p1" onmouseover="tColor2()" onmouseout="tColor()">
   Here is some text in a paragraph.</p>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>ID</title>
<script type="text/javascript" language="JavaScript">
<!--
function tColor2() {
var tColor2 = document.getElementById ("p1");
tColor2.style.color= "blue";
tColor2.style.fontFamily = "Times Roman";
}
function tColor() {
var tColor = document.getElementById ("p1");
tColor.style.color= "red";
tColor.style.fontFamily = "Arial";
}
// -->
</script>
</head>
<body>
<p id="p1" onmouseover="tColor2()" onmouseout="tColor()">
   Here is some text in a paragraph.</p>
</body>
</html>

8. USE DOCTYPE STATEMENTS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">