Explaining The 3 Steps
Step 1: When?
When a visitor clicks on a link a pop-up window should appear.
When a visitor puts their cursor over a navigation item it should glow.
When the page finishes loading the animation should start.
In JavaScript terms these circumstances are called events. When writing a script deciding when you want something to happen is most often the easiest part. Some events you have to choose from are listed below.
- Document Wide Events
- onload, onunload & onresize
- Link Based Events
- onmouseover, onmouseout & onclick
- Form or Form Element Base Events
- onsubmit & onchange
In rare cases, such as preloading images or writing html content based on browser testing a JavaScript will not be be associated with any events. These scripts execute as the browser encounters the
Let us start with a basic html document containing a navigation element that we want to switch.
<html> <head> <title>Simple Rollover Demonstration</title> </head> <body> <a href="nextpage.html" title="Go to the next page"><img src="button.gif" height="75" width="200" alt="next page"></a> </body> </html>
In this case of a simple rollover we are concerned with two link events - onmouseover & onmouseout. Adding them to the script is easy.
<html>
<head>
<title>Simple Rollover Demonstration</title>
</head>
<body>
<a href="nextpage.html" title="Go to the next page"
onmouseover="" onmouseout=""><img
src="button.gif" height="75" width="200"
alt="next page"></a>
</body>
</html>
In each script we will write code which executes when the specified even happens. These are called event handlers. Writing the outline of JavaScript functions to handle these events is the last thing we need to do to answer the when question.
<html> <head> <title>Simple Rollover Demonstration</title> <script type="text/javascript"> function handleMouseOver() { } function handleMouseOut() { } </script> </head> <body> <a href="nextpage.html" title="Go to the next page" onmouseover="handleMouseOver()" onmouseout="handleMouseOut()"><img src="button.gif" height="75" width="200" alt="next page"></a> </body> </html>
Step 2: What?
In answering the question of what we want to do it we need to get specific. As I mentioned above, the goal is to break the complex task into its simple parts. In the case of our simple rollover there is only one step to each event handler. With form checking which we will see later there will be a number of steps. The smallest part is one that deals with only one action taking place. This could include changing a style property of an element on the page, opening a new window, or examining the value of a form element.
This process could get quite complex. In the case of animating the movement of a layer across the screen you'd have to plan out each step in the sequence of movement. In these cases I have found it easier to start by writing out each step in words before trying to figure out the code. This is known as pseudo code in computer science circles.
Now lets get back to our rollover example. First to write it out, a quite trivial task in this case
<html>
<head>
<title>Simple Rollover Demonstration</title>
<script type="text/javascript">
function handleMouseOver() {
// step 1: change the nav image to the glowing version
}
function handleMouseOut() {
// step 1: change the nav image to the plain version
}
</script>
</head>
<body>
<a href="nextpage.html" title="Go to the next page"
onmouseover="handleMouseOver()"
onmouseout="handleMouseOut()"><img
src="button.gif" height="75" width="200"
alt="next page"></a>
</body>
</html>
From here we then add the javascript code to complete the what phase.
<html> <head> <title>Simple Rollover Demonstration</title> <script type="text/javascript"> function changeImageSrc() { } function handleMouseOver() { // step 1: change the nav image to the glowing version changeImageSrc(); } function handleMouseOut() { // step 1: change the nav image to the plain version changeImageSrc(); } </script> </head> <body> <a href="nextpage.html" title="Go to the next page" onmouseover="handleMouseOver()" onmouseout="handleMouseOut()"><img src="button.gif" height="75" width="200" alt="next page"></a> </body> </html>
Step 3: How?
Our final step is where we start looking at the specifics of browsers and the document object model (DOM). This is a two part question. The first part is to decide what information we need to know in order to get a hold of the item we want to change or otherwise work with. The second is to answer what how were are going to work with it in different browsers.
In the case of our rollover each time we want to change the image source, we need to know 2 things - which image on the page we want to change and what the location of the new image is. With javascript there are two ways to find an image on the page, by the order it appears in the html document, or by the name of the image. In the case of our simple document we can simply use document.images[0] because the navigation item is the first and only image on the page, but in many other cases this isn't practical because documents change over time. It's because of this we will name the image and use that to find the image in our script. Adding these two pieces of information to the document we get the following.
<html> <head> <title>Simple Rollover Demonstration</title> <script type="text/javascript"> function changeImageSrc(whichImage,newGraphic) { } function handleMouseOver() { // step 1: change the nav image to the glowing version changeImageSrc("navitem","glowingbutton.gif"); } function handleMouseOut() { // step 1: change the nav image to the plain version changeImageSrc("navitem","button.gif"); } </script> </head> <body> <a href="nextpage.html" title="Go to the next page" onmouseover="handleMouseOver()" onmouseout="handleMouseOut()"><img name="navitem" src="button.gif" height="75" width="200" alt="next page"></a> </body> </html>
And finally, we make the browser change the image. To prevent a javascript error in any browser that doesn't support changing images we will first check that the images array is available to us, and then change the navigation image.
<html>
<head>
<title>Simple Rollover Demonstration</title>
<script type="text/javascript">
function changeImageSrc(whichImage,newGraphic) {
if (document.images) {
document.images[whichImage].src = newGraphic;
}
}
function handleMouseOver() {
// step 1: change the nav image to the glowing version
changeImageSrc("navitem","glowingbutton.gif");
}
function handleMouseOut() {
// step 1: change the nav image to the plain version
changeImageSrc("navitem","button.gif");
}
</script>
</head>
<body>
<a href="nextpage.html" title="Go to the next page"
onmouseover="handleMouseOver()"
onmouseout="handleMouseOut()"><img name="navitem"
src="button.gif" height="75" width="200"
alt="next page"></a>
</body>
</html>
