[jQuery] Re: Need help making a menu appear next to the users image....

[Jack Killpatrick]

I think this (below) will work (I tested it locally). The trick is using 
setTimeout to allow some time for the mouse to move between the image 
and the menu, before deciding to hide the menu. This example will make 
the menu appear when you hover over the image, stay visible if you move 
your mouse from the image to the menu, and disappear if you move the 
mouse off of the menu to anywhere other than back to the image, or if 
you move the mouse from the image to something other than the menu.

   <style type="text/css">
       #imgDiv { float:left }
       #menu { float:left; display:none; width:150px; height:150px; 
border:1px solid silver; padding:10px; }
   </style>
  
   <script type="text/javascript" src="jquery-1.2.6.js"></script>
   <script type="text/javascript">
       var onMenu = false;
       var onImg = false;
       $(function() {
           $('#img').hover(
               function(){
                   onImg = true;
                   $('#menu').fadeIn('fast');
               },
               function(){
                   onImg = false;
                   setTimeout(function(){
                       if (!onMenu) $('#menu').fadeOut('fast');
                   },50);
               }
           );

           $('#menu').hover(
               function(){
                   onMenu = true;
               },
               function(){
                   onMenu = false;
                   setTimeout(function(){
                       if (!onImg) $('#menu').fadeOut('fast');
                   },50);
               }
           );
       });
   </script>

<div id="imgDiv"><img id="img" 
src="http://www.pups4sale.com.au/maltese_puppy_04.jpg"; width="287" 
height="356" /></div>
<div id="menu">
   <a href="#">Nice Puppy</a><br/>
   <a href="#">Bad Puppy</a>
</div>
<div style="clear:both"></div>

- Jack

Aaron wrote:
Hi I  have a website that I am currently working on. I have user's to
upload images and select which image is default.

I want to make the user able to when they have the mouse over the
image to have a menu next to the image fade in.

Now the problem. I tried with hover and then tried using mouseover
functions.

The problem is when the user puts his mouse over his image it would
fade in a menu but when you move your mouse to put it on the menu it
fades out.

I don't know what to do.  I notice since I made the javascript to fade
in when mouse is on user image and when it's off user image it is then
faded out this is a problem since the menu if off the users image.

I been playing around with this. I  have the menu hidden first and
then faded in and out.

I want to have the user to be able to put the mouse on the user image
and move it off the image onto the menu and be able to click buttons
on it and if the mouse is off the users image and not on the menu then
the menu would fade out.

any Ideas???