Now, you can control properties other than left and top, of course, like z-index.
Let's say we wanted to have the monkeys chase one another around a desk.
You can almost hear the cries of, "Taylor, finish your tutorial!" "NEVER!",
"No, come on, I have to edit it. Finish up!"
"NO!"
"I need
at least two weeks to produce it!"
"STOP BUGGIN' ME, I'M PLAYING LEGOS!!!"
[You are seeing GIFs instead of actual dynamic HTML here because you're
using a pre-4.0 browser or, in some cases, Netscape 4, which won't always
display dHTML inside tables.]
Besides modifying the z-index of each monkey, I've also used one JavaScript
routine to move all the monkeys (rather than having a routine for each monkey).
function moveMonkey(monkey, dir) {
if (document.all) {
var wtMonkey = document.all(monkey).style;
} else if (document.layers) {
var wtMonkey = document.monkeyContainer.document.layers[monkey];
}
if ((parseInt(wtMonkey.left) <0) || (parseInt(wtMonkey.left) > 150)) {
dir = dir * -1;
wtMonkey.zIndex = 5 - dir;
}
wtMonkey.left = parseInt(wtMonkey.left) + dir;
setTimeout('moveMonkey(\'' + monkey + '\', ' + dir +')', 100);
}
The name of the monkey is passed along to the function, which moves it by changing the
left dimension of the monkey. It then does the standard feature check,
setting the reference variable for the appropriate browser. It then changes the
z-index and direction of movement, if the monkey has moved to either end of the
desk. Finally, it moves the monkey and then calls the function again, passing
the variables.
Keep in mind that this is only one way to do a generic JavaScript movement
routine. You can feel free to add, subtract, or write your own. In fact, I encourage
it. So here's the homework. Take act I, scene I, and animate it. Use either the
code snippets provided or make up your own. Make the monkeys run around their
desks, make them jump for joy, make them sing and shout. Feel free to make up
your own plots and dialogs. When you're constructing your routines, just remember how Netscape nests positioned objects.
