Solved

onmouseout problem with div menu

Posted on 2008-10-27
2
594 Views
Last Modified: 2012-05-05
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
Comment
Question by:ukapu2005
2 Comments
 

Author Comment

by:ukapu2005
Comment Utility
please send me the answer as early as possible
0
 
LVL 28

Accepted Solution

by:
Pravin Asar earned 500 total points
Comment Utility
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now