Java OnMouseOver event

Question

DaveyMoyes -1 Junior Poster in Training

16 Years Ago

Hi everyone, its been a while since i kast posted on here,

Im trying to make the following menu open on the mouseover event, but im having loads of problems, Whilst the menu system works great on the click event, Copy and paste this code if you are looking fro a good easy menu system for any webpage you may be designing.

What I would like is to haver the menu work on the OnMouseOver Event, Hoping someone can help,

<script language="JavaScript" type="text/JavaScript">
<!--
menu_status = new Array();

function showHide(theid){
    if (document.getElementById) {
          var switch_id = document.getElementById(theid);
        if(menu_status[theid] != 'show') {
           switch_id.className = 'show';
           menu_status[theid] = 'show';
           set_cookie(theid,'hide');
        }else{
           switch_id.className = 'hide';
           menu_status[theid] = 'hide';
           set_cookie(theid,'show');
        }
    }
}

function showHideAll()
{
      var menuState = get_cookie ('mymenu1');
      menu_status['mymenu1']=menuState;
      showHide('mymenu1');

      menuState = get_cookie ('mymenu2');
      menu_status['mymenu2']=menuState;
      showHide('mymenu2');
	  
	  menuState = get_cookie ('mymenu3');
      menu_status['mymenu3']=menuState;
      showHide('mymenu3');
	  
	  menuState = get_cookie ('mymenu4');
      menu_status['mymenu4']=menuState;
      showHide('mymenu4');
	  
}



function get_cookie ( cookie_name )
{
  var results = document.cookie.match ( cookie_name + '=(.*?)(;|$)' );


  if ( results )
    return ( unescape ( results[1] ) );
  else
    return null;
}

function set_cookie ( name, value, exp_y, exp_m, exp_d, path, domain, secure )
{
  var cookie_string = name + "=" + escape ( value );

  if ( exp_y )
  {
    var expires = new Date ( exp_y, exp_m, exp_d );
    cookie_string += "; expires=" + expires.toGMTString();
  }

  if ( path )
        cookie_string += "; path=" + escape ( path );

  if ( domain )
        cookie_string += "; domain=" + escape ( domain );

  if ( secure )
        cookie_string += "; secure";

  document.cookie = cookie_string;
}

//-->
</script>

<style type="text/css">
.menu1{
	background-color:#2a4c79;
	padding-left:5px;
	padding-top:2px;
	padding-bottom: 2px;
	display:block;
	text-decoration: none;
	color: #ffffff;
	height: 20px;
	font-family:Tahoma;
	font-size:12px;
	border-top:solid 1px #000000;
}

.menu2{
	background-color:#2a4c79;
	padding-left:5px;
	padding-top:2px;
	padding-bottom: 2px;
	display:block;
	text-decoration: none;
	color: #ffffff;
	height: 20px;
	font-family:Tahoma;
	font-size:12px;
	border-top:solid 1px #000000;
}

.menu3{
	background-color:#2a4c79;
	padding-left:5px;
	padding-top:2px;
	padding-bottom: 2px;
	display:block;
	text-decoration: none;
	color: #ffffff;
	height: 20px;
	font-family:Tahoma;
	font-size:12px;
	border-top:solid 1px #000000;
}
.menu4{
	background-color:#2a4c79;
	padding-left:5px;
	padding-top:2px;
	padding-bottom: 2px;
	display:block;
	text-decoration: none;
	color: #ffffff;
	height: 20px;
	font-family:Tahoma;
	font-size:12px;
	border-top:solid 1px #000000;
}

 .submenu{
	background-color:#ffffff;
	display: block;
	height: 20px;
	padding-top: 2px;
	padding-left: 5px;
	color: #2a4c79;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	border-top:solid 1px #000000;
}

.hide{
      display: none;
}

.show{
      display: block;
}
</style>
</head>
</head>

<body onLoad="javascript:showHideAll()">
<div style="width:135px; height:192px">

 <a class="menu1" onClick="showHide('mymenu1')">Links</a>
    <div id="mymenu1" class="hide">
        <a href="www.somewhere.com" title="Click to go somewhere" class="submenu">Somewhere Link</a>
        
        
    </div>

<a class="menu2" onClick="showHide('mymenu2')">Links</a>
    <div id="mymenu2" class="hide">
  <a href="www.somewhere.com" title="Click to go somewhere" class="submenu">Somewhere Link</a>
    </div>
    
    
    <a class="menu3" onClick="showHide('mymenu3')">Links</a>
    <div id="mymenu3" class="hide">
    <a href="www.somewhere.com" title="Click to go somewhere" class="submenu">Somewhere Link</a>	
    </div>
    
<a class="menu4" onClick="showHide('mymenu4')">Links</a>
    <div id="mymenu4" class="hide">
    <a href="www.somewhere.com" title="Click to go somewhere" class="submenu">Somewhere Link</a>  
    </div>

javascript

Edited 16 Years Ago by Ezzaral because: Added [code] [/code] tags. Please use them to format any code that you post. You should know this by 15 posts.

2 Contributors
2 Replies
271 Views
1 Day Discussion Span
Latest Post 16 Years Ago Latest Post by DaveyMoyes

Dani AI

Generated 9 Months Ago

Nice start — ’s quick change gets you hover behavior, but there are two gotchas to watch for and a cleaner pattern to use.

First, the existing showHide is a toggle. Calling a toggle on both enter and leave will often flip the menu twice as the pointer moves between the label and the submenu, producing flicker. Also the cookie-writing in the original showHide is inconsistent (it writes the opposite state), which will make “restore on load” behave oddly. Use a clear, explicit show and hide instead of a single toggle.

A practical, modern approach:

Create showMenu(id) and hideMenu(id) that call classList.add('show') / classList.remove('show') and store a stable state (localStorage or a cookie value like open/closed).
Use mouseenter / mouseleave (or check event.relatedTarget) so events don’t bubble and retrigger when moving between child elements.
Add a small hide delay (100–250ms) and cancel that timeout on show to avoid accidental flicker.

Example (drop this in a script block; it’s intentionally different from the posted code):

var _hideTimers = {};

function showMenu(id){
  clearTimeout(_hideTimers[id]);
  var el = document.getElementById(id);
  if (!el) return;
  el.classList.add('show');
  localStorage.setItem(id, 'open');
}

function hideMenu(id){
  var el = document.getElementById(id);
  if (!el) return;
  _hideTimers[id] = setTimeout(function(){
    el.classList.remove('show');
    localStorage.setItem(id, 'closed');
  }, 200);
}

Attach listeners programmatically to the trigger and the submenu (mouseenter → showMenu, mouseleave → hideMenu). For touch devices add a click toggle fallback (detect via 'ontouchstart' in window or navigator.maxTouchPoints) and add keyboard support (focus/blur or CSS :focus-within) for accessibility.

Troubleshooting: if the menu still flickers, replace mouseover/mouseout with mouseenter/mouseleave or inspect event.relatedTarget to ensure you only hide when the pointer truly leaves both trigger and submenu.

All 2 Replies

Graphix 68 ---

16 Years Ago

Try this:

<script language="JavaScript" type="text/JavaScript">
<!--
menu_status = new Array();

function showHide(theid){
    if (document.getElementById) {
          var switch_id = document.getElementById(theid);
        if(menu_status[theid] != 'show') {
           switch_id.className = 'show';
           menu_status[theid] = 'show';
           set_cookie(theid,'hide');
        }else{
           switch_id.className = 'hide';
           menu_status[theid] = 'hide';
           set_cookie(theid,'show');
        }
    }
}

function showHideAll()
{
      var menuState = get_cookie ('mymenu1');
      menu_status['mymenu1']=menuState;
      showHide('mymenu1');

      menuState = get_cookie ('mymenu2');
      menu_status['mymenu2']=menuState;
      showHide('mymenu2');
	  
	  menuState = get_cookie ('mymenu3');
      menu_status['mymenu3']=menuState;
      showHide('mymenu3');
	  
	  menuState = get_cookie ('mymenu4');
      menu_status['mymenu4']=menuState;
      showHide('mymenu4');
	  
}



function get_cookie ( cookie_name )
{
  var results = document.cookie.match ( cookie_name + '=(.*?)(;|$)' );


  if ( results )
    return ( unescape ( results[1] ) );
  else
    return null;
}

function set_cookie ( name, value, exp_y, exp_m, exp_d, path, domain, secure )
{
  var cookie_string = name + "=" + escape ( value );

  if ( exp_y )
  {
    var expires = new Date ( exp_y, exp_m, exp_d );
    cookie_string += "; expires=" + expires.toGMTString();
  }

  if ( path )
        cookie_string += "; path=" + escape ( path );

  if ( domain )
        cookie_string += "; domain=" + escape ( domain );

  if ( secure )
        cookie_string += "; secure";

  document.cookie = cookie_string;
}

//-->
</script>

<style type="text/css">
.menu1{
	background-color:#2a4c79;
	padding-left:5px;
	padding-top:2px;
	padding-bottom: 2px;
	display:block;
	text-decoration: none;
	color: #ffffff;
	height: 20px;
	font-family:Tahoma;
	font-size:12px;
	border-top:solid 1px #000000;
}

.menu2{
	background-color:#2a4c79;
	padding-left:5px;
	padding-top:2px;
	padding-bottom: 2px;
	display:block;
	text-decoration: none;
	color: #ffffff;
	height: 20px;
	font-family:Tahoma;
	font-size:12px;
	border-top:solid 1px #000000;
}

.menu3{
	background-color:#2a4c79;
	padding-left:5px;
	padding-top:2px;
	padding-bottom: 2px;
	display:block;
	text-decoration: none;
	color: #ffffff;
	height: 20px;
	font-family:Tahoma;
	font-size:12px;
	border-top:solid 1px #000000;
}
.menu4{
	background-color:#2a4c79;
	padding-left:5px;
	padding-top:2px;
	padding-bottom: 2px;
	display:block;
	text-decoration: none;
	color: #ffffff;
	height: 20px;
	font-family:Tahoma;
	font-size:12px;
	border-top:solid 1px #000000;
}

 .submenu{
	background-color:#ffffff;
	display: block;
	height: 20px;
	padding-top: 2px;
	padding-left: 5px;
	color: #2a4c79;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	border-top:solid 1px #000000;
}

.hide{
      display: none;
}

.show{
      display: block;
}
</style>
</head>
</head>

<body onLoad="javascript<b></b>:showHideAll()">
<div style="width:135px; height:192px">

 <a class="menu1" onmouseover="showHide('mymenu1')" onmouseout="showHide('mymenu1')">Links</a>
    <div id="mymenu1" class="hide" onmouseover="showHide('mymenu1')" onmouseout="showHide('mymenu1')">
        <a href="www.somewhere.com" title="Click to go somewhere" class="submenu">Somewhere Link</a>
        
        
    </div>

 <a class="menu2" onmouseover="showHide('mymenu2')" onmouseout="showHide('mymenu2')">Links</a>
    <div id="mymenu2" class="hide" onmouseover="showHide('mymenu2')" onmouseout="showHide('mymenu2')">
        <a href="www.somewhere.com" title="Click to go somewhere" class="submenu">Somewhere Link</a>
        
        
    </div>
    
    
 <a class="menu3" onmouseover="showHide('mymenu3')" onmouseout="showHide('mymenu3')">Links</a>
    <div id="mymenu3" class="hide" onmouseover="showHide('mymenu3')" onmouseout="showHide('mymenu3')">
        <a href="www.somewhere.com" title="Click to go somewhere" class="submenu">Somewhere Link</a>
        
        
    </div>
    
 <a class="menu4" onmouseover="showHide('mymenu4')" onmouseout="showHide('mymenu4')">Links</a>
    <div id="mymenu4" class="hide" onmouseover="showHide('mymenu4')" onmouseout="showHide('mymenu4')">
        <a href="www.somewhere.com" title="Click to go somewhere" class="submenu">Somewhere Link</a>
        
        
    </div>

~G

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

DaveyMoyes -1 Junior Poster in Training · Answer 1 · 2009-10-30T06:23:06+00:00

This is brilliant, many thanks. I think it looks much better with the OnMouseOver effect,

Java OnMouseOver event

Dani AI

Recommended Answers Collapse Answers

All 2 Replies

Recommended Answers