Need help making a menu appear next to the users image....

[Aaron-100]

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???

[Aaron-100]

I already  Tried many ways... even hover events and mouse over events
been playing around with them and was not able to make them to
function as I want them too.

I want the user to put the mouse over their image to get a menu  to
fade in and when the mouse is off the users image I want the menu to
fade out only if the mouse is not over the menu.

I can't get it to work.

[Ca-Phun Ung]

Aaron wrote:

> I already  Tried many ways... even hover events and mouse over events
> been playing around with them and was not able to make them to
> function as I want them too.
>
> I want the user to put the mouse over their image to get a menu  to
> fade in and when the mouse is off the users image I want the menu to
> fade out only if the mouse is not over the menu.
>
> I can't get it to work.
>  

Do you have a demo online? Would make it easier to help you if you could
show us some code.

-- Ca-Phun Ung
+ http://yelotofu.com

[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???
>
>