You will be using the images dog.gif, cat.gif and hamster.gif provided in the class files folder.
1. Place the following code in the body of your HTML document:
| <center> <h1>My Favourite Pets</h1> <img src="dog.gif" name="pet" height=18% width=8%> <br> <font size=5> <p><a href="javascript:changePet('dog.gif');">.Dog.</a> <p><a href="javascript:changePet('cat.gif');">.Cat.</a> <p><a href="javascript:changePet('hamster.gif');">.Hamster.</a> </font> </center> |
Notice how we used anchor tags to enclose the menu entries. We made the entries into links by defining the href attribute. This, however, is not your regular sort of link. Instead of defining the href attribute to be a URL, we defined JavaScript code to be executed when the link is clicked. When you click any of these "links", the corresponding JavaScript is executed. We used the javascript: prefix to denote that the target of the link is the following JavaScript code, and not a regular URL.
The JavaScript executed when the cat button is clicked, for example, is changePet('cat.gif');. Where did the changePet function come from??? Well, nowhere really; It doesnt exist, we will create it. So now we want to create a function that takes in a single parameter, which is the name of a file. This function should then set the source (which is the src property) of the image object pet to equal that filename.
2. Insert the code for the function changePet into the head portion of your page:
| <script language= “JavaScript”> <!-- function changePet(file) { document.pet.src=file; } //--> </script> |
Functions like the above are usually defined in the head of an HTML document. As shown above, function definitions must me enclosed by opening and closing script tags. The syntax for function definition is, as shown above, the keyword function followed by the name of the function and a list of parameters between parentheses(if there is more than one parameter the list is seperated by commas). Then, the statements composing the function are placed between curly brackets { }. The above function takes in one parameter, and calls it file. There is a single statement in this function; This sets the value of document.pet.src to equal the value of file. Now that we have defined the changePet function, calls to that function from the links in our menu can be made.
3. View your page with the browser. If the menu doesn't work, be sure to check all semicolons, apostrophes, and quotation marks.
When a menu option is clicked, the corresponding JavaScript code is executed. That code calls the changePet function and gives that function a single parameter representing the name of the file. The changePet function then receives that parame ter, calls it file, and uses it to change the source of the pet image.
