We will now look into creating a menu using Javascript. We will create a simple menu, which has a number of clickable options. There will be a single image which changes when options is selected. We will also create a function which takes care of changing the menu image.
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.
