[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 639
  • Last Modified:

onmouseout problem with div menu

Please see the attached code snippet below. I am displaying the menu with the img and div elements. when I click on the image drop down icon, the menu will be displaued(with div tags). I want to close the menu as soon as  I move the mouse out of the menu. can some one help me to resolve this issue. Thanks in advance.

<img id='IdReplyArrowImage1' alt=""
						             src='/ResultsReview/images/downbtn16x12.gif' height="20px" width="13px"
						
						             style='vertical-align:bottom; border-width:0px;display:inline;position:relative;left:-4px;'
						
						             onmouseover="this.style.cursor='hand';this.src='/ResultsReview/images/rec_pat_up.gif';"
						             onmouseout="this.style.cursor='default';this.src='/ResultsReview/images/downbtn16x12.gif';"
						             onclick="showPopupWindow(oPopup, document.all.popupLockDiv, document.all.IdReplyArrowImage1, -60, 0)">		
						             
									<div id="popupLockDiv" toggle="fade" style="display: none;" class="wfTitleMenu" style="overflow:auto; height:350px; z-index: 100;">
									  <div style="border:1 solid #000000; background-color:#F5F5F5; font-family:Arial,Helvetica,sans-serif; font-size:8pt">
									    <div id="stdDiv"
									         onmouseover="this.style.backgroundColor='#000000'; this.style.color='#FFFFFF'"
									         onmouseout="this.style.backgroundColor='#F5F5F5'; this.style.color='#000000'"
									         style = "cursor:hand" onclick="parent.onSaveAndPrint('Standard');">&nbsp;Standard</div>
									
									    <div id="lrDiv"
									         onmouseover="this.style.backgroundColor='#000000'; this.style.color='#FFFFFF'"
									         onmouseout="this.style.backgroundColor='#F5F5F5'; this.style.color='#000000'"
									         style = "cursor:hand" onclick="parent.onSaveAndPrint('Legal-Record');">&nbsp;Legal-Record
									         </div>  
									         
									     <div id="pmDiv"
									         onmouseover="this.style.backgroundColor='#000000'; this.style.color='#FFFFFF'"
									         onmouseout="this.style.backgroundColor='#F5F5F5'; this.style.color='#000000'"
									         style = "cursor:hand" onclick="parent.onSaveAndPrint('Patient-Mailer');">&nbsp;Patient-Mailer
									     </div>
									     <div id="lhDiv"
									         onmouseover="this.style.backgroundColor='#000000'; this.style.color='#FFFFFF'"
									         onmouseout="this.style.backgroundColor='#F5F5F5'; this.style.color='#000000'"
									         style = "cursor:hand" onclick="parent.onSaveAndPrint('Letter-Head');">&nbsp;Letter-Head
									     </div>        
									   </div>     
									</div>

Open in new window

0
ukapu2005
Asked:
ukapu2005
1 Solution
 
ukapu2005Author Commented:
please send me the answer as early as possible
0
 
Pravin AsarPrincipal Systems EngineerCommented:
To have a menu stay , you need to add mouseout event trigger to menu(div).

Look at the attached sample.
Also instead setting each display attribute separately, use CSS class and do the className assignments on
mouseover  and mouseout events.



<html>
<head>
<title>Document/Page Title</title>
<style type="text/css">
.show {
display: block;
background-color: #4499dd;
width: 200px;
}
.hide {
display: none;
}
.l1 {
background-color: #FF99FF;
}
.l2 {
background-color: #99FF99;
}
</style>
<script language="javascript">
function showhide(menuId, flag) {
var class = "hide";
if (flag==1) {
class = "show"
}
document.getElementById(menuId).className = class;
}
</script>
</head>
<body>
<img src="Img1.gif" onmouseover="showhide('menu1',1);" >
<div id="menu1" class="hide" onmouseover="showhide('menu1',1);" onmouseout="showhide('menu1',0);">
      <ul>
      <li class="l1"><a href="http:\\www.yahoo.com">Yahoo</a></li>
      <li class="l2"><a href="http:\\www.microsoft.com">Microsoft</a></li>
      <li class="l1"><a href="http:\\www.google.com">Google</a></li>
      </ul>
</div>
</body>
</html>
0

Featured Post

Learn to develop an Android App

Want to increase your earning potential in 2018? Pad your resume with app building experience. Learn how with this hands-on course.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now