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;
}
}
function manipulate_events(mouseeve
var topics = document.getElementById("t
var topic = topics.getElementsByTagNam
if (mouseevent=="off") { // clear all mouse events
for (i=0; i<topic.length; i++) {
topic[i].onmouseout = '';
topic[i].onmouseover = '';
}
}
else if (mouseevent=="on") { // restore mouse events
for (i=0; i<topic.length; i++) {
var z = "topic"+i;
topic[i].onmouseout = function(){this.style.back
topic[i].onmouseover = new Function("this.style.backg
}
}
return;
}