I want to stop a rollover function for a particular element in my menu. At the moment I have several functions and I need to control them. If I mouseOver a menu item I need an image to slide in partially and if I mouse out slide back off the screen. If I click the menu item I want the image to slide all the way in but then I want to kill or remove the mouseOut function for that menu item until another menu item is clicked on. Is it possible to keep a function from working until it's required? <script language="javascript" type="text/javascript"> //slide in onClick var isOut = 'True' function slideIn(id){ if(isOut == 'True' || id=='home_btn'){ t1.continueTo(363,2); isOut = 'False' } } /* function slideOut(id){ t1 = new Tween(document.getElementById(id).style,'left',Tween.elasticEaseOut,363,995,2,'px'); t1.start(); } */ //mouseOut function bounceOut(id){ t1 = new Tween(document.getElementById(id).style,'left',Tween.elasticEaseOut,830,995,1,'px'); t1.start(); } //mouseOver function bounceIn(id){ Show(id); //alert(isOut) t1 = new Tween(document.getElementById(id).style,'left',Tween.elasticEaseOut,995,830,1,'px'); t1.start(); } //change background images onClick function changeBg(id){ if(id=='home_btn'){ //alert('home') document.getElementById('page_bg').style.backgroundImage='url(images/home_bg.jpg)'; } else if(id=='about_you'){ //alert('about_you') document.getElementById('page_bg').style.backgroundImage='url(images/aboutyou_bg.jpg)'; } else if(id=='raise_bar'){ //alert('about_you') document.getElementById('page_bg').style.backgroundImage='url(images/raisebar_bg.jpg)'; } } </script> Code (markup):