How to append onmouseover/out event or dynamically add multiple commands for event

I have a mouseover/out event for many objects, and I want to add 'commands' to the event.  What  I'm really trying to accomplish is to dynamically add multiple commands to the event but I cannot get it to work.  For instance, here are some code snippets with my comments.  Thanks in advance!  Please let me know if I didn't choose the appropriate points value for this question.

function manipulate_events(mouseevent) {
      var topics = document.getElementById("topiclist"); // wrapper id
      var topic = topics.getElementsByTagName("span"); // individual 'span' tags in the wrapper above
      if (mouseevent=="off") { // clear all mouse events
            for (i=0; i<topic.length; i++) {
                  topic[i].onmouseout = '';
                  topic[i].onmouseover = '';
            }
            return;
      }
      else if (mouseevent=="on") { // restore mouse events
            for (i=0; i<topic.length; i++) {
                  var z = "topic"+i;
                        topic[i].onmouseout = function(){this.style.backgroundColor="#FFFFFF";} // works beautifully
                        topic[i].onmouseover = function(){this.style.backgroundColor="#CCCCCC"; displayLinks(z);} // this last function (displayLinks) doesn't work as expected.  It inserts the last 'z' value, in this case "topic37", into all objects in the array  -- therefore only displaying topic37
            }
            topic[1].onmouseover =       function(){displayLinks("topic1");} // so I tried to use brute force to append an event command, but it overwrote the 'style' change above
            topic[3].onmouseover =       function(){displayLinks("topic3");} //      same here...
            return;
      }
}