Assignment 5
| Back to # 5 - Handling Events | Table of Contents | #5 Review Questions |
1. In the following HTML tag, what kind of information do you think is being passed with the event handler? Write the function named 'format' that will display the information being passed in an alert box.
<INPUT TYPE = "text" NAME= "phone" onChange = "format(this.value);">
2. Create a web page that contains a form with two radio buttons, one labelled White and one labelled Green. Have your web page open with a background color set to yellow. Then write two event handlers that will change the background color of the page when the user clicks on one of the radio buttons. The property to be changed is 'document.bgColor'.
3. One of the most fun effects to do in a web page is called a mouseOver. It's where a certain image appears on the web page, and when the mouse cursor passes over the image, it changes to another image of the same size. Then when the mouse leaves the image, it reverts back to the original. The two event handlers you need are called onMouseOver and onMouseOut. There was an example in Lesson One for you to look at. Write a mouseOver of your own. To make it easy, you can use these two images (they need to be the same size! ) here for you.
red4die.gif and green4die.gif
Open your blank web page, and place the red image on the page with the <IMG>
tag. Be sure the use the 'name=myDie' attribute within the image tag. We
will use the name to tell JavaScript how to find this image.
In order to make the rollover as smooth as possible, and avoid an annoying delay in downloading the second image from the server, we will use some JavaScript to preload the images. Inside the <head> section, place the <SCRIPT> and </SCRIPT> tags, thenadd this code inside the <SCRIPT> tagsyou will create a few variables that will be used to swap the images.
if (document.images) {
// checks to see that the browser is compatible with images
var redCube= new Image; // make two image Objects
var greenCube= new Image;
// now tell the objects where their source files are
redCube.src="red4Die.gif";
greenCube.src="green4Die.gif";
}
else { // old browsers get told what to do here
redCube.src=""; // empty filenames
greenCube.src="";
document.myDie=""; // image object is empty too
} // now old browsers won't look just horrible
Now go into the <BODY> section and add an event handler inside the
<IMG> tag. Like this, using the variables that you set up in the <HEAD>
section and the DOM naming scheme. (document.objectName.PropertyName)
<img name = "myDie" src="red4die.gif" onMouseOver="document.myDie.src=greenCube.src"
onMouseOut="document.myDie.src=redCube.src">
Save this as assign5-3.htm and test it in both browsers. You can have some fun with different images. Note that rollovers can also be used with links , the <A> tags as long as the image has the 'name= 'attribute set.