?
Solved

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

Posted on 2006-10-18
2
Medium Priority
?
280 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 63

Accepted Solution

by:
Zvonko earned 400 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
This article discusses how to create an extensible mechanism for linked drop downs.
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…
Suggested Courses

801 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