Solved

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

Posted on 2006-10-18
2
273 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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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…

770 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