JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

Java OnMouseOver event

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Thread Solved

•
•
Join Date: May 2009
Posts: 18
Reputation: DaveyMoyes is an unknown quantity at this point 
Solved Threads: 0
DaveyMoyes DaveyMoyes is offline Offline
Newbie Poster

Java OnMouseOver event

 
0
  #1
31 Days 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,

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; 31 Days Ago 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.
why did I ever start.....
If you have helped me in the past, or you help me in the future.
I say thanks to you all
it is appreciated
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2009
Posts: 76
Reputation: Graphix is an unknown quantity at this point 
Solved Threads: 17
Graphix's Avatar
Graphix Graphix is offline Offline
Junior Poster in Training
 
0
  #2
31 Days Ago
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
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2009
Posts: 18
Reputation: DaveyMoyes is an unknown quantity at this point 
Solved Threads: 0
DaveyMoyes DaveyMoyes is offline Offline
Newbie Poster
 
0
  #3
30 Days Ago
This is brilliant, many thanks. I think it looks much better with the OnMouseOver effect,
why did I ever start.....
If you have helped me in the past, or you help me in the future.
I say thanks to you all
it is appreciated
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread has been marked solved.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



ajax ajaxcode ajaxexample ajaxhelp ajaxjspservlets animate automatically beta box browser bug calendar captchaformproblem checkbox child class close column createrange() css cursor debugger dependent disablefirebug dom download dropdown editor element embed engine error events explorer ext file form forms getselection google gwt gxt hiddenvalue highlightedword hint html htmlform ie7 ie8 iframe images internet java javascript javascripthelp2020 jawascriptruntimeerror jquery jsf jsfile jump libcurl math media microsoft mimic object onmouseoutdivproblem onreadystatechange parent paypal pdf php player position post problem programming progressbar regex runtime scroll search security select session shopping size software sql text textarea unicode w3c web website window windowofwords windowsxp wysiwyg \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC