HIDE AND SHOW MENU using mouseover and mouseout

Poster: harmony
Dated: Sunday April 15 2007 - 20:56:24 BST

Dear Milonic,

Any help on this would be greatly appreciated!


I have a simple 2 column HTML page with some rollover images.


When you rollover one of the images on the leftside nav bar, a new image appears below it.

The Milonic menu is in the left side nav bar. I want the Milonic menu to appear all the time except when the user rollsover one of the images on the leftside nav bar. When they rollover an image, a new image should appear below (where the Milonic menu was) and the Milonic menu should disappear.

I tried using z-index without any luck.

Any chance of this?

Thanks

Poster: harmony
Dated: Sunday April 15 2007 - 23:45:23 BST

If it helps, I think I need to HIDE the milonic menu as soon as the user mousesover the original image. Then the new rollover image needs to appear in the milonic menu's place. I think this is done through JavaScript, but I don't know how to do it.

Any help?

Poster: harmony
Dated: Sunday April 15 2007 - 23:46:59 BST

I got this code on the support site, but don't know how to implement it in this case:

[code]<script language="JavaScript" type="text/JavaScript">
<!--
function mm_showMenu(menuName) // , alwaysVisState = optional. 1=on, 0=off
{
  var menuNum = getMenuByName(menuName);
  if (arguments.length > 1)_m[menuNum][7] = arguments[1];
  menuDisplay(menuNum, 1);
}

function mm_hideMenu(menuName) // , alwaysVisState = optional. 1=on, 0=off
{
  var menuNum = getMenuByName(menuName);
  if (arguments.length > 1)_m[menuNum][7] = arguments[1];
  menuDisplay(menuNum, 0);
}

//-->
</script>[/code]

How do I make it so that if I mouse over one image, the milonic menu disappears and a new image appears in it's place. Then when I mouseout, how do I get the milonic menu back and the rollover image disappears? Seems easy, but I haven't a clue how to actually implement the code.

Thanks

Poster: harmony
Dated: Monday April 16 2007 - 2:54:22 BST

Ok,

It looks like I've whittled it down to just needing to know how to HIDE and SHOW the Milonic menu.

So if I mouseover an image (not related to the Milonic menu - just a header image), can I have the menu HIDE and when I mouseout, can it reappear?

Any help if greatly appreciated and I'm certainly willing to pay anyone who can help!

Thanks

Poster: harmony
Dated: Monday April 16 2007 - 15:18:24 BST

Any ideas on what javascript to use and where? It seems easy enough to be able to mouseover an image (any old image on the site) and make the menu disappear and then mouseout the image and have the menu reappear.

I've spent about 6 hours trying to get code to work that I found on this help site, to no avail. Any help would be greatly appreciated and I'll pay if necessary.

Thanks

Poster: harmony
Dated: Monday April 16 2007 - 23:20:46 BST

Help? Anyone?

Poster: Ruth
Dated: Tuesday April 17 2007 - 2:29:32 BST

Hi,

I'm posting to Milonic. I'm sorry but I have no idea how to do this either. Where did you find the code you posted. If I see that I might be able to figure it out.

Ruth

Poster: harmony
Dated: Tuesday April 17 2007 - 2:56:10 BST

Hi Ruth,

Thanks for the reply,

I think I got it from here:

http://www.milonic.com/mfa/2004-Decembe ... -menu.html

If I do a search at http://www.milonic.com for: mm_showMenu(menuName)

and get several responses with the same code.

Hope you can help and thanks!

Poster: Ruth
Dated: Tuesday April 17 2007 - 6:19:36 BST

Hi,

Well, I found some things, however, I only get things to work by testing, I have no knowledge of how to write js and such. So, to see if I can figure how to get it to do what you want, I really need your existing page with the menu and the images you have you mouseover to get a different image, but the menu stays, and you want the menu to go away, then come back.

Ruth

Poster: harmony
Dated: Tuesday April 17 2007 - 15:20:11 BST

Hi Ruth,

Thanks for helping.

If you go here:

http://1footprint.com

You can see what I'm working on.


On the left side you'll see the first image: Cal Performances Presents (presents_series_nav.gif)

Under that image, you'll see the first menu (Main Menu). Behind that menu there is another image. What I want to do is:

1. MouseOver the presents_series_nav.gif and have the Main Menu disappear.

2. MouseOut the presents_series_nav.gif and have the Main Menu re-appear.

The existing code for that section is this (around line 134):



The MouseOvers already in the code needs to be changed, but I don't know how.

You'll see that I tried to make the other 2 section images rollover, but the image appears behind the menu. If I use z-index, the menu doesn't work. So z-index isn't an option.

Thanks again.

Poster: Ruth
Dated: Tuesday April 17 2007 - 17:12:09 BST

Hi,

I will see what I can do, but you will have to upgrade to the newest version of the menu, if I do get anything to work, since that is the version I will be using. I have no access to older versions, and no way of knowing what has been changed in the programming - which I don't know how to do anyway.

Ruth

Poster: harmony
Dated: Wednesday April 18 2007 - 15:14:17 BST

Great, no problem

Poster: Ruth
Dated: Thursday April 19 2007 - 1:08:13 BST

Hi,

Well, good news and not good news.

1. I couldn't get that js functions to work. I could but I don't know how to do functions and that function is based on onclick of a form button. I can make it onclick for the image, but that means to get the menu back you have to click the image again. Most people wouldn't think they had to click again.

2. I did get what you wanted to happen, but it is using a Milonic popup menu in each of the image. What I did was set them up as submenus opening off the images you have. Below is the explanation, which is pretty long. Sorry about that.


In order to do this, when you mouse over an image and pop up a menu, it is not usually to cover another menu, so in order to make sure the pop up menu popped down I had to split each of your images into two. For example, the Cal Performances Presents, which has Cal Performances on top and PRESENTS on the bottom, is now two images, Cal Performances and then PRESENTS below it. It still looks like one and the link surrounds both so no matter where you click on the top or bottom you go to the page. Anyway, when the person mouses over Cal Performances an submenu which is only your text image opens right below PRESENTS, and when they move the mouse down once it hits presents the popmenu closes and the regular menu now shows. That is how I did all three of them and that seems to work.

Finally, you'll have to look at the css and at the page to see how I had to set up the table, backgrounds and images. To make sure the layout is the same in IE and FF, and I would assume NN, I had to do the table with 3 rows, the center row being the one that has the Ticket, and the right side images, the narrow blue, email, and request a brochure. I am still playing around because it would be better if you had all the left nav menus in their own table cells so that if someone changes font size and shifts the layout they go with it.

I'm also working on another option which might work out better. That one would use the function, but again split images where the bottom image would open your now existing menus as a pop menu and keep it visible using keepalive. That way when the person mouses over the PRESENTS I'm hoping the pop menu would cover the div with the text in it. But, I don't know if that's possible.

If this works for you, I'll try to get the table setup like that and post back. If you can't use this let me know .

Let me know when you have the files, so I can remove them from my site. Thanks

Ruth

Poster: harmony
Dated: Friday April 20 2007 - 18:26:35 BST

Wow Ruth, thanks for all the work.

I'll see if I can get this to work. The only problem I see is the redesign. I'm not sure they are going to allow this. If this is the only way, then they'll have a choice to make.

Thanks again and if you happen to be able to use the existing layout and make it work, that'd be great. But this solutions seems to work, so I'll work with it.

Poster: Ruth
Dated: Friday April 20 2007 - 19:18:46 BST

Hi,

Well, the only 'redesign' was to change the table layout, it is actually the same 'look' as you can see. But, I know how the U's are about things. I'll continue to play and see if I can get it to somehow work with the original layout. But, remember, even if I could figure out how to do it with the show hide function, the layout would be changed since that would require putting in absolutely positioned divs for the image you want to show on mouseover, so that would be divs for each of those images.

Ruth