Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2006-10-18
2
Medium Priority
?
283 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

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
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…

597 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