Change main menu image when submenu moused over

caerdydd · Post by **caerdydd** » Tue Sep 28, 2004 12:00 pm

Hi there,

I have a menu with a main menu image that rolls over when the user mouses over, and brings up a sub menu. However I would like to change the top level image back to the off-state, when the user mouses down over the sub menu.

In the URL below, orange indicates a moused-off top level image. Dark blue indicates an "active" top level image. However the top level image remains "active" even when the user is mousing over the submenu.

Is there any way to change the top level image when mousing over a sub menu image?

http://digital.wwavrc.co.uk/wwav_new/RCCH/

Many thanks,
Neil

Maz · Post by **Maz** » Tue Sep 28, 2004 2:40 pm

Brain freeze

Sounds like you need onmouseover, but since that's not normal state of the main menu opening the sub, I'm not sure.

Anyone else know?

maz

Post by **Ruth** » Tue Sep 28, 2004 4:20 pm

Hi Neil,
Maz is right, you need a mouseOver function. Kevin wrote one for someone else. I think you could modify it as to the images to get it to do what you want, however I don't think you can keep the original image static. This will be a little long in the explanation, but I want to make sure you understand so you don't have problem. I am not a person who writes functions so.....

The menu has the built in offfunction/onfunction for the image/overimage actions which is triggered by the mouseOver/Off. Kevin's function allows you to add a third image which would be triggered by mouseOver on whichever item to which you have assigned his function. When you use Kevin's function applied to a submenu item, it calls a third different image when you mouseOver, and returns the main menu to overimage when you mouseOut. It doesn't return it to the image because if you did that in effect [since this function works with the original menu function] you'd be telling the menu function that there is only ONE image for the main menu mouseOver.

So, what you can do is copy the main menu image that shows when you first load the menu. Then rename it to something else and call that in the onfunction portion of Kevin's function, assign the original overimage to the offfunction part of Kevin's function, then assign Kevin's function to each submenu item. What happens then is as you mouseOver a submenu item it returns the main menu overimage to the image, but when you mouseOff it will return it to the overimage.

Since I don't write functions, I do not know if it would be possible to actually do something with Kevin's function to make it do what you want becaue it interacts with the existing built-in menu function. You can see the function here Hope this helps.

Ruth

caerdydd · Post by **caerdydd** » Tue Sep 28, 2004 5:28 pm

Thanks for your feedback folks. I have applied Kevin's http://milonic.com/forum/viewtopic. ... 4348#14348 mm_changeItemProperty function to create a third color on the top level images:

http://digital.wwavrc.co.uk/RCCH/index.html

There seem to be two main problems:

1. Sometimes when you roll back on to the top level menu item, the image returns to the off state (orange). I guess this is because there is no onfunction event being invoked at the top level menu (it is always on when either it or the submenu is active).

2. It's a bit clunky because of the extra function calls. Compare the performance of the above menu to this 2-color one (I have preloaded images for both menus)...

http://digital.wwavrc.co.uk/wwavrc/RCCH/index.html

Here are the relevent menus (well, the top-level and the first of the submenus)...

Code: Select all

//top level
with(milonic=new menuname("MainMenu")){
	style=menuStyleHoriz;
	top=0;
	left=0;
	alwaysvisible=1;
	orientation="horizontal";
	position="relative";
	aI("image=images/nav/whoweare.gif;overimage=images/nav/whoweare-on2.gif;showmenu=whoweare;url=whoweare.html;");
	aI("image=images/nav/ourapproach.gif;overimage=images/nav/ourapproach-on2.gif;showmenu=ourapproach;url=ourapproach.html;");
	aI("image=images/nav/ourclients.gif;overimage=images/nav/ourclients-on2.gif;showmenu=ourclients;url=ourclients.html;");
	aI("image=images/nav/ourwork.gif;overimage=images/nav/ourwork-on2.gif;showmenu=ourwork;url=ourwork.html;");
	aI("image=images/nav/contactus.gif;overimage=images/nav/contactus-on2.gif;url=contactus.html;");
}
drawMenus();

Code: Select all

//Sub menu - NH 22.09.2004
with(milonic=new menuname("whoweare")){
style=menuStyleVert;
aI("image=images/nav/whoweare-subnav/people.gif;overimage=images/nav/whoweare-subnav/people-on.gif;url=people.html;onfunction=mm_changeItemProperty('MainMenu','images/nav/whoweare.gif',32,'images/nav/whoweare-on.gif',1);offfunction=mm_changeItemProperty('MainMenu','images/nav/whoweare.gif',32,'images/nav/whoweare-on2.gif',1);");
aI("image=images/nav/bottom.gif;onfunction=mm_changeItemProperty('MainMenu','images/nav/whoweare.gif',32,'images/nav/whoweare-on.gif',1);offfunction=mm_changeItemProperty('MainMenu','images/nav/whoweare.gif',32,'images/nav/whoweare-on2.gif',1);");
aI("image=images/nav/whoweare-subnav/links.gif;overimage=images/nav/whoweare-subnav/links-on.gif;url=links.html;onfunction=mm_changeItemProperty('MainMenu','images/nav/whoweare.gif',32,'images/nav/whoweare-on.gif',1);offfunction=mm_changeItemProperty('MainMenu','images/nav/whoweare.gif',32,'images/nav/whoweare-on2.gif',1);");
aI("image=images/nav/bottom.gif;onfunction=mm_changeItemProperty('MainMenu','images/nav/whoweare.gif',32,'images/nav/whoweare-on.gif',1);offfunction=mm_changeItemProperty('MainMenu','images/nav/whoweare.gif',32,'images/nav/whoweare-on2.gif',1);");
}

Thanks,
Neil

Maz · Post by **Maz** » Tue Sep 28, 2004 5:53 pm

You are really cutting against the grain of the fabric on this, may I suggest a simpler idea, by changing the oncolor/image of the main menu so it at least looks different from the submenu or the same as off main menu. Might make more sense in the long run.

maz

Post by **Ruth** » Tue Sep 28, 2004 7:19 pm

The problem you see with orange has to do with the on/off mouse function, the mouse has left the submenu and not yet reached the main menu item. There's no way for you to control how the visitors use their mouse.

I agree with Maz 100% about doing a different overimage for the main menu.

Ruth

caerdydd · Post by **caerdydd** » Wed Sep 29, 2004 10:07 am

Thanks for your comments Ruth & Maz (Cate)!

I guess the point my client is trying to make is that the top level menu items are links in their own right, as well as navigational controls to reach the submenus. So logically they should roll over the same color as anything else when moused over, so that visitors realise they are links.

I think you may be right though, that it's better to rethink the design somewhat.

Cheers,
Neil

Post by **Ruth** » Wed Sep 29, 2004 5:38 pm

The status bar shows a url when you mouseOver the top items and the mouse pointer is a hand. You could also add status= and words to describe that topic. But, I don't know that everyone actually reads the browser status bar. As another thought, you could perhaps put a separate category in the sub that refers to the top level. For example The Who We Are could have a first item in the sub About Rapp Collins, the Our Approach could have a first item of Rapp Collins Vision; the Our Clients could have In Their Own Words, or What They Say; Our Work could have one of Confidentiality or something like that.

Ruth