AnimTree

Event Handlers

onclick="toggleMenu(this)"

You must to call toggleMenu(this) in either the label or inside the label's img onclick event handler. (see sample). If you want the menu to open onmouseover, use the onmouseover event handler.

onmouseover="buttonOver(this)" - optional

You may call buttonOver(this) to handle the mouseover. buttonOver changes the label's class. If the label is active, its class will be changed to "buttonlabel labelDown labelHover." If the label is not active, its class will be changed to "buttonlabel labelHover."

onmouseout="buttonOff(this)" - optional

You may call buttonOff(this) to handle the mouseout. buttonOff changes the label's class. If the label is active, its class will be changed to "buttonlabel labelDown." If the label is not active, its class will be changed to "buttonlabel."

Event Handlers Explained

buttonOver and buttonOff

The buttonOver and buttonOff functions change the appearance of the label. The example on the HTML tab showed an example of toggleMenu(this) called on an span tag's onclick. I mentioned the functions buttonOver and buttonOff for onmouseover and onmouseout event handlers.

toggleMenu Called in Label's onclick

Below is a modification to the example on the HTML tab. Instead of having toggleMenu called in the onclick handler of an img tag, toggleMenu is called in the onclick handler of the label itsself. This means that the menu will be activated by clicking on the label's text or the icon.

<!-- fff button 
    this is the button for the menu with id="fffMenu" 
    (shown in blue, below)
-->
<div id="fff" class="button menuNode">

<!-- Label.
    this is the label for the fff button
-->
  <span class="buttonlabel level1label" 
   onclick='toggleMenu(this)' 
    onmouseover='buttonOver(this)' 
     onmouseout='buttonOff(this)' >
<!-- Icon.
    this is the icon for the fff button.
    Note that the icon is within the label.
-->
    <img src='../img/menuicon.gif'
          title='click to toggle menu'
          alt='*'
          />Bach Family</span>
</div>

<!-- begin menu for fff button -->

<div class="menu" id="fffMenu">
  <div class="menuNode"><!-- item 1 -->
    <a href="http://www.hoasm.org/VIIG/BachJC.html">Johann Sebastian</a>
  </div>
  <div class="menuNode"><!-- item 2 -->
    <a href="http://www.hoasm.org/XID/BachCPE.html">Carl Philip Emanuel</a>
  </div>
  <div class="menuNode"><!-- item 3 -->
    <a href="http://www.hoasm.org/VIIG/BachJC.html">Johann Christian</a>
  </div>
</div> 
<!-- end menu for fff button -->

buttonOff works the same way as buttonOver. You can see this from the source code in the demo you saw earlier.

Next in this tutorial: Modifying the CSS