CODEWITHSUNDEEP
javascripthtml
apples
apples

Reputation: 147

Javascript/HTML - Hiding and showing images onmouseover and onmouseout

I have a Function that when you move your mouse over one of the drop down menus it then removes the instruction image and when you remove your mouse after three seconds it then puts the image back up. I use onmouseover and onmouseout to detect when you move you mouse off and on the menu items. Here's the javascript code that makes this happen.

<script type="text/javascript">
function show(){
      document.getElementById("instru").style.display = ''
}
function hide() {
      document.getElementById("instru").style.display = 'none';
}
</script>

and here is the code that is used to make a menu with the onmouseover and onmouseout functions.

<ul id="MenuBar1" class="MenuBarHorizontal">
  <li><a class="MenuBarItemSubmenu" href="#" onmouseover="hide()" onmouseout="setInterval(function(){show()},3000)")">1-5</a>
<ul>
  <li><a href="#" data-lightbox="" onmouseover="hide()" onmouseout="setInterval(function(){show()},3000)">1</a></li>
  <li><a href="#" data-lightbox="" onmouseover="hide()" onmouseout="setInterval(function(){show()},3000)">2</a></li>
  <li><a href="#" data-lightbox="" onmouseover="hide()" onmouseout="setInterval(function(){show()},3000)">3</a></li>
  <li><a href="#" data-lightbox="" onmouseover="hide()" onmouseout="setInterval(function(){show()},3000)">4</a></li>
  <li><a href="#" data-lightbox="" onmouseover="hide()" onmouseout="setInterval(function(){show()},3000)">5</a></li>
</ul>

My only problem is when you move your mouse on the menu or submenu items the first couple of times it will hide and then re-display the image. Then after that nothing happens. I'm not sure why this happening.

I have looked on other questions with no luck. I have checked w3school.com to make sure i was doing everything correctly. I've done some Google searches with no luck either. I used Dreamweaver to set up the page but have use notepad++ to do the rest and after i ran into this error i checked my syntax in Dreamweaver and didn't run into any errors.

Any help would be appreciated if you would like to see the whole code I cant post a link to the website.

To summarize my question. I have a page with a menu that when the menu item or submenu item is clicked it will hide the instructions picture and when you remove your mouse it will re-display it. My problem is it only works a couple of times and then you have to reload the page for it to work again.

Upvotes: 2

Views: 3686

Answers (1)

php-dev
php-dev

Reputation: 7156

You have to fix two issues in your script :

1- When you move your mouse from a submenu to another submenu your mouseouting the first one and mouseovering the second one which will program to call the show function in 3 seconds and execute the hide function now. So, your show function every 3 seconds when you mouseout any submenu item. Imagine when you hover the submenus 100 times! A fix will be :

  • Use setTimeout (once execution) instead of setInterval
  • Store your timeout in a variable to clear later

2- clear the timeout returned with setTimeout

function hide() {
      clearTimeout(timeout);
      document.getElementById("instru").style.display = 'none';
}

HTML Code

<ul id="MenuBar1" class="MenuBarHorizontal">
  <li><a class="MenuBarItemSubmenu" href="#" onmouseover="hide()" 
               onmouseout="timeout = setTimeout(function(){show()},3000)">1-5</a>
<ul>
  <li><a href="#" data-lightbox="" onmouseover="hide()" onmouseout="timeout = setTimeout(function(){show()},3000)">1</a></li>
....
</ul>

UPDATE

A working fiddle example here.

Hope it helps.

Upvotes: 1

Related Questions