944,185 Members | Top Members by Rank

Web Development > JavaScript / DHTML / AJAX > Java OnMouseOver event
Ad:
Permalink
Oct 28th, 2009
0

Java OnMouseOver event

Expand Post »
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,

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <script language="JavaScript" type="text/JavaScript">
  2. <!--
  3. menu_status = new Array();
  4.  
  5. function showHide(theid){
  6.     if (document.getElementById) {
  7.           var switch_id = document.getElementById(theid);
  8.         if(menu_status[theid] != 'show') {
  9.            switch_id.className = 'show';
  10.            menu_status[theid] = 'show';
  11.            set_cookie(theid,'hide');
  12.         }else{
  13.            switch_id.className = 'hide';
  14.            menu_status[theid] = 'hide';
  15.            set_cookie(theid,'show');
  16.         }
  17.     }
  18. }
  19.  
  20. function showHideAll()
  21. {
  22.       var menuState = get_cookie ('mymenu1');
  23.       menu_status['mymenu1']=menuState;
  24.       showHide('mymenu1');
  25.  
  26.       menuState = get_cookie ('mymenu2');
  27.       menu_status['mymenu2']=menuState;
  28.       showHide('mymenu2');
  29.  
  30. 	  menuState = get_cookie ('mymenu3');
  31.       menu_status['mymenu3']=menuState;
  32.       showHide('mymenu3');
  33.  
  34. 	  menuState = get_cookie ('mymenu4');
  35.       menu_status['mymenu4']=menuState;
  36.       showHide('mymenu4');
  37.  
  38. }
  39.  
  40.  
  41.  
  42. function get_cookie ( cookie_name )
  43. {
  44.   var results = document.cookie.match ( cookie_name + '=(.*?)(;|$)' );
  45.  
  46.  
  47.   if ( results )
  48.     return ( unescape ( results[1] ) );
  49.   else
  50.     return null;
  51. }
  52.  
  53. function set_cookie ( name, value, exp_y, exp_m, exp_d, path, domain, secure )
  54. {
  55.   var cookie_string = name + "=" + escape ( value );
  56.  
  57.   if ( exp_y )
  58.   {
  59.     var expires = new Date ( exp_y, exp_m, exp_d );
  60.     cookie_string += "; expires=" + expires.toGMTString();
  61.   }
  62.  
  63.   if ( path )
  64.         cookie_string += "; path=" + escape ( path );
  65.  
  66.   if ( domain )
  67.         cookie_string += "; domain=" + escape ( domain );
  68.  
  69.   if ( secure )
  70.         cookie_string += "; secure";
  71.  
  72.   document.cookie = cookie_string;
  73. }
  74.  
  75. //-->
  76. </script>
  77.  
  78. <style type="text/css">
  79. .menu1{
  80. 	background-color:#2a4c79;
  81. 	padding-left:5px;
  82. 	padding-top:2px;
  83. 	padding-bottom: 2px;
  84. 	display:block;
  85. 	text-decoration: none;
  86. 	color: #ffffff;
  87. 	height: 20px;
  88. 	font-family:Tahoma;
  89. 	font-size:12px;
  90. 	border-top:solid 1px #000000;
  91. }
  92.  
  93. .menu2{
  94. 	background-color:#2a4c79;
  95. 	padding-left:5px;
  96. 	padding-top:2px;
  97. 	padding-bottom: 2px;
  98. 	display:block;
  99. 	text-decoration: none;
  100. 	color: #ffffff;
  101. 	height: 20px;
  102. 	font-family:Tahoma;
  103. 	font-size:12px;
  104. 	border-top:solid 1px #000000;
  105. }
  106.  
  107. .menu3{
  108. 	background-color:#2a4c79;
  109. 	padding-left:5px;
  110. 	padding-top:2px;
  111. 	padding-bottom: 2px;
  112. 	display:block;
  113. 	text-decoration: none;
  114. 	color: #ffffff;
  115. 	height: 20px;
  116. 	font-family:Tahoma;
  117. 	font-size:12px;
  118. 	border-top:solid 1px #000000;
  119. }
  120. .menu4{
  121. 	background-color:#2a4c79;
  122. 	padding-left:5px;
  123. 	padding-top:2px;
  124. 	padding-bottom: 2px;
  125. 	display:block;
  126. 	text-decoration: none;
  127. 	color: #ffffff;
  128. 	height: 20px;
  129. 	font-family:Tahoma;
  130. 	font-size:12px;
  131. 	border-top:solid 1px #000000;
  132. }
  133.  
  134.  .submenu{
  135. 	background-color:#ffffff;
  136. 	display: block;
  137. 	height: 20px;
  138. 	padding-top: 2px;
  139. 	padding-left: 5px;
  140. 	color: #2a4c79;
  141. 	font-family:Verdana, Arial, Helvetica, sans-serif;
  142. 	font-size:12px;
  143. 	border-top:solid 1px #000000;
  144. }
  145.  
  146. .hide{
  147.       display: none;
  148. }
  149.  
  150. .show{
  151.       display: block;
  152. }
  153. </style>
  154. </head>
  155. </head>
  156.  
  157. <body onLoad="javascript:showHideAll()">
  158. <div style="width:135px; height:192px">
  159.  
  160.  <a class="menu1" onClick="showHide('mymenu1')">Links</a>
  161.     <div id="mymenu1" class="hide">
  162.         <a href="www.somewhere.com" title="Click to go somewhere" class="submenu">Somewhere Link</a>
  163.  
  164.  
  165.     </div>
  166.  
  167. <a class="menu2" onClick="showHide('mymenu2')">Links</a>
  168.     <div id="mymenu2" class="hide">
  169.   <a href="www.somewhere.com" title="Click to go somewhere" class="submenu">Somewhere Link</a>
  170.     </div>
  171.  
  172.  
  173.     <a class="menu3" onClick="showHide('mymenu3')">Links</a>
  174.     <div id="mymenu3" class="hide">
  175.     <a href="www.somewhere.com" title="Click to go somewhere" class="submenu">Somewhere Link</a>	
  176.     </div>
  177.  
  178. <a class="menu4" onClick="showHide('mymenu4')">Links</a>
  179.     <div id="mymenu4" class="hide">
  180.     <a href="www.somewhere.com" title="Click to go somewhere" class="submenu">Somewhere Link</a>  
  181.     </div>
Last edited by Ezzaral; Oct 28th, 2009 at 4:32 pm. Reason: Added [code] [/code] tags. Please use them to format any code that you post. You should know this by 15 posts.
Similar Threads
Reputation Points: 10
Solved Threads: 0
Light Poster
DaveyMoyes is offline Offline
38 posts
since May 2009
Permalink
Oct 29th, 2009
0
Re: Java OnMouseOver event
Try this:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <script language="JavaScript" type="text/JavaScript">
  2. <!--
  3. menu_status = new Array();
  4.  
  5. function showHide(theid){
  6.     if (document.getElementById) {
  7.           var switch_id = document.getElementById(theid);
  8.         if(menu_status[theid] != 'show') {
  9.            switch_id.className = 'show';
  10.            menu_status[theid] = 'show';
  11.            set_cookie(theid,'hide');
  12.         }else{
  13.            switch_id.className = 'hide';
  14.            menu_status[theid] = 'hide';
  15.            set_cookie(theid,'show');
  16.         }
  17.     }
  18. }
  19.  
  20. function showHideAll()
  21. {
  22.       var menuState = get_cookie ('mymenu1');
  23.       menu_status['mymenu1']=menuState;
  24.       showHide('mymenu1');
  25.  
  26.       menuState = get_cookie ('mymenu2');
  27.       menu_status['mymenu2']=menuState;
  28.       showHide('mymenu2');
  29.  
  30. 	  menuState = get_cookie ('mymenu3');
  31.       menu_status['mymenu3']=menuState;
  32.       showHide('mymenu3');
  33.  
  34. 	  menuState = get_cookie ('mymenu4');
  35.       menu_status['mymenu4']=menuState;
  36.       showHide('mymenu4');
  37.  
  38. }
  39.  
  40.  
  41.  
  42. function get_cookie ( cookie_name )
  43. {
  44.   var results = document.cookie.match ( cookie_name + '=(.*?)(;|$)' );
  45.  
  46.  
  47.   if ( results )
  48.     return ( unescape ( results[1] ) );
  49.   else
  50.     return null;
  51. }
  52.  
  53. function set_cookie ( name, value, exp_y, exp_m, exp_d, path, domain, secure )
  54. {
  55.   var cookie_string = name + "=" + escape ( value );
  56.  
  57.   if ( exp_y )
  58.   {
  59.     var expires = new Date ( exp_y, exp_m, exp_d );
  60.     cookie_string += "; expires=" + expires.toGMTString();
  61.   }
  62.  
  63.   if ( path )
  64.         cookie_string += "; path=" + escape ( path );
  65.  
  66.   if ( domain )
  67.         cookie_string += "; domain=" + escape ( domain );
  68.  
  69.   if ( secure )
  70.         cookie_string += "; secure";
  71.  
  72.   document.cookie = cookie_string;
  73. }
  74.  
  75. //-->
  76. </script>
  77.  
  78. <style type="text/css">
  79. .menu1{
  80. 	background-color:#2a4c79;
  81. 	padding-left:5px;
  82. 	padding-top:2px;
  83. 	padding-bottom: 2px;
  84. 	display:block;
  85. 	text-decoration: none;
  86. 	color: #ffffff;
  87. 	height: 20px;
  88. 	font-family:Tahoma;
  89. 	font-size:12px;
  90. 	border-top:solid 1px #000000;
  91. }
  92.  
  93. .menu2{
  94. 	background-color:#2a4c79;
  95. 	padding-left:5px;
  96. 	padding-top:2px;
  97. 	padding-bottom: 2px;
  98. 	display:block;
  99. 	text-decoration: none;
  100. 	color: #ffffff;
  101. 	height: 20px;
  102. 	font-family:Tahoma;
  103. 	font-size:12px;
  104. 	border-top:solid 1px #000000;
  105. }
  106.  
  107. .menu3{
  108. 	background-color:#2a4c79;
  109. 	padding-left:5px;
  110. 	padding-top:2px;
  111. 	padding-bottom: 2px;
  112. 	display:block;
  113. 	text-decoration: none;
  114. 	color: #ffffff;
  115. 	height: 20px;
  116. 	font-family:Tahoma;
  117. 	font-size:12px;
  118. 	border-top:solid 1px #000000;
  119. }
  120. .menu4{
  121. 	background-color:#2a4c79;
  122. 	padding-left:5px;
  123. 	padding-top:2px;
  124. 	padding-bottom: 2px;
  125. 	display:block;
  126. 	text-decoration: none;
  127. 	color: #ffffff;
  128. 	height: 20px;
  129. 	font-family:Tahoma;
  130. 	font-size:12px;
  131. 	border-top:solid 1px #000000;
  132. }
  133.  
  134.  .submenu{
  135. 	background-color:#ffffff;
  136. 	display: block;
  137. 	height: 20px;
  138. 	padding-top: 2px;
  139. 	padding-left: 5px;
  140. 	color: #2a4c79;
  141. 	font-family:Verdana, Arial, Helvetica, sans-serif;
  142. 	font-size:12px;
  143. 	border-top:solid 1px #000000;
  144. }
  145.  
  146. .hide{
  147.       display: none;
  148. }
  149.  
  150. .show{
  151.       display: block;
  152. }
  153. </style>
  154. </head>
  155. </head>
  156.  
  157. <body onLoad="javascript<b></b>:showHideAll()">
  158. <div style="width:135px; height:192px">
  159.  
  160.  <a class="menu1" onmouseover="showHide('mymenu1')" onmouseout="showHide('mymenu1')">Links</a>
  161.     <div id="mymenu1" class="hide" onmouseover="showHide('mymenu1')" onmouseout="showHide('mymenu1')">
  162.         <a href="www.somewhere.com" title="Click to go somewhere" class="submenu">Somewhere Link</a>
  163.  
  164.  
  165.     </div>
  166.  
  167.  <a class="menu2" onmouseover="showHide('mymenu2')" onmouseout="showHide('mymenu2')">Links</a>
  168.     <div id="mymenu2" class="hide" onmouseover="showHide('mymenu2')" onmouseout="showHide('mymenu2')">
  169.         <a href="www.somewhere.com" title="Click to go somewhere" class="submenu">Somewhere Link</a>
  170.  
  171.  
  172.     </div>
  173.  
  174.  
  175.  <a class="menu3" onmouseover="showHide('mymenu3')" onmouseout="showHide('mymenu3')">Links</a>
  176.     <div id="mymenu3" class="hide" onmouseover="showHide('mymenu3')" onmouseout="showHide('mymenu3')">
  177.         <a href="www.somewhere.com" title="Click to go somewhere" class="submenu">Somewhere Link</a>
  178.  
  179.  
  180.     </div>
  181.  
  182.  <a class="menu4" onmouseover="showHide('mymenu4')" onmouseout="showHide('mymenu4')">Links</a>
  183.     <div id="mymenu4" class="hide" onmouseover="showHide('mymenu4')" onmouseout="showHide('mymenu4')">
  184.         <a href="www.somewhere.com" title="Click to go somewhere" class="submenu">Somewhere Link</a>
  185.  
  186.  
  187.     </div>

~G
Reputation Points: 82
Solved Threads: 74
Posting Pro in Training
Graphix is offline Offline
401 posts
since Aug 2009
Permalink
Oct 29th, 2009
0
Re: Java OnMouseOver event
This is brilliant, many thanks. I think it looks much better with the OnMouseOver effect,
Reputation Points: 10
Solved Threads: 0
Light Poster
DaveyMoyes is offline Offline
38 posts
since May 2009

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Javascript stopped working in new version of firefox
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: HELP!! Tabifier JavaScript blanking out tab





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC