Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 637
  • 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 AsarCommented:
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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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