Now all that remains is to give each menu item an action. This could really be anything, it's not necessarily related to dynamic HTML. But since this is a dynamic HTML tutorial, and specifically a lesson focusing on changing the visibility of layers, let's have each entry turn on or off the visibility of a layer containing a picture of that particular monkey. It's nothing new from the DOM, just another way of manipulating what you've been working with.
<script>
function menuItem(item){
if (document.layers) {
daLast = document.layers[lastItem];
daItem = document.layers[item];
} else if (document.all) {
daLast = document.all(lastItem).style;
daItem = document.all(item).style;
}
daLast.visibility = hidden;
daItem.visibility = visible;
lastMenu.visibility = hidden;
lastItem = item;
}
var lastItem = 'aaron';
</script>
This script evokes our friend Mr. Conditional, setting two objects to work with the item to turn on (item), and then the last item that was turned on (lastItem, which had been set to 'aaron' by default), and remembering the last menu that was turned on (lastMenu which we set in the barTog) function. Then, after it sets all the visibilities, it records the lastItem.
Next each item needs to be surrounded by an anchor that calls it appropriately.
<a href="#" class="itemAnchor"
onclick="menuItem('captCursor'); return false">
This calls the menuItem function, and tells it to make the DIV with the ID of "captCursor" visible. Now place that anchor around every item and include a DIV with the appropriate Webmonkey's name on your page, and you will have a page to show all the monkeys after you choose it from a menu.
Now make your own menu with your own categories. Hide and reveal DIVs, and try putting form elements in the DIV for extra credit. Then we'll move on to our final lesson, where we combine all this and make some full-screen presentations.
