What's the best way to "turn off" a javascript function triggered by an event on the page

Question

I have a nav element that onmouseover I'd like to disable the onmouseover of nearby images.

I was thinking that I'd just loop through and collect the images and set their onmouseover to '' and then onmouseout of the nav element set the images onmouseover back to what it was.

Is there a better way to just get the images onmouseover function to turn off/on through onmouseover/onmouseout of the nav elements?

Answer 1

Use jQuery. Something like this should do:

$("#id_of_your_element").hover(function(){
    $(".other_elements_class").unbind("mouseover").unbind("mouseover");
}, function(){
    $(".other_elements_class").hover(your_mouseover_function, your_mouseout_function);
});

Answer 2

Why not do the following:

1. Point all onmouseover events on all images to a single function
2. Point all onmouseout events on all images to a single function
3. Have a variable in the global scope, let's say var imageInFocus = null;
4. Whenever you enter the function:
   if(imageInfocus == null), assign the current image name to it, and handle that image.
   else, if it's not null, ignore.
   That way, you'll handle just one image at a time.
5. on onmouseout, just assign null back to imageInFocus, so it will be available for the next image.

Answer 3

Okay, I think all of those things would work, but that turned out not to be my issue. The issue was that something being set in the images mouseover function was still affecting the navigation once the images were rolled over, even if they were no longer active, being displayed, or had no mouseover events.

Thanks though.