Solved

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

Posted on 2006-10-18
2
272 Views
Last Modified: 2012-06-27
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;
      }
}


0
Comment
Question by:WBuffet
2 Comments
 
LVL 63

Accepted Solution

by:
Zvonko earned 100 total points
ID: 17764217
Check this:



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 = '';
          }
     }
     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";};
               topic[i].onmouseover = new Function("this.style.backgroundColor='#CCCCCC'; displayLinks('"+z+"');");
          }
     }
     return;
}





0
 
LVL 2

Author Comment

by:WBuffet
ID: 17770304
Excellent - that did the trick, thanks!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now