image rollover navigation highlight question...

Monkee-Boy · Post by **Monkee-Boy** » Sun Oct 19, 2003 11:46 pm

Let's say I have 3 sections in my web site:

COMPANY | SERVICES | PRODUCTS

When building a horizontal image rollover navigation, each section has an "on" graphic (company_on.gif) and an "off" graphic (company_off.gif) -- so when a user rolls over the _off.gif graphic it is replaced with the _on.gif graphic... pretty standard rollover stuff.

With the Milonic Menu code, when the user rolls over a section and travels down the menu tree, the main section _on.gif graphic stays highlighted... very cool.

Here's the tricky part. Let's say a user clicks on COMPANY, or an item in its drop down menu... is there any way to keep the _on.gif graphic displayed so the user has a visual representation that they are in the COMPANY section?

Any help is most appreciated!!! Thanks!

tepidarium · Post by **tepidarium** » Sun Oct 19, 2003 11:52 pm

Hi,

I think I had the same queston as you a little while ago. I beleive the answer is yes - check out this thread:
http://milonic.com/forum/viewtopic. ... highlight=

Take care

Monkee-Boy · Post by **Monkee-Boy** » Mon Oct 20, 2003 12:29 am

Cool... so I checked out the Quick Reference guide and think I found the correct property:

pageimage -- Sets the associated rollover image of the menu item if the current browser url matches the url field.

BUT, I am not sure where I need to put it within my tree code. I have played around with it, but can't seem to make it work. Where would the code for my _on.gif (pageimage="/img/nav_company_on.gif") sit within this code?

CODE:
......................................................................

with(milonic=new menuname("Main Menu")){
style=menuStyle;
top=83;
left=147;
alwaysvisible=1;
orientation="horizontal";
aI("showmenu=company;image=/img/nav_company_off.gif;overimage=/img/nav_company_on.gif;");
}

with(milonic=new menuname("company")){
style=menuStyle;
borderwidth=1;
bordercolor="#A49481";
itemwidth=87;
left=682;
top=105;
aI("text=The Store;url=/company/index.shtml;");
aI("text=The Humidor ;url=/company/humidor.shtml;");
aI("text=The Lounge;url=/company/lounge.shtml;");
aI("text=Directions;url=/company/directions.shtml;");
aI("text=Contact Us;url=/company/contact.shtml;");
}

drawMenus();

......................................................................

Post by **John** » Mon Oct 20, 2003 4:08 am

Check http://milonic.com/ under DHTML Menu for the Quick Reference guides and info on all the Milonic DHTML menu parameters.

Monkee-Boy · Post by **Monkee-Boy** » Mon Oct 20, 2003 5:35 am

Sadly, I have been there, and it is not offering the help that I need.

I need to find out the best way to implement the code within the guide. Is there any URL you can point me to that explains the difference between Style Properties, Menu Properties, and Menu Item Properties... seeing how all of them behave slightly differently and are coded uniquely.

Like I said I have tried to implement the little snippet, but it does not work...

with(milonic=new menuname("company")){
style=menuStyle;
pageimage="/img/nav_company_on.gif"
borderwidth=1;
bordercolor="#A49481";
itemwidth=87;
left=682;
top=105;
aI("text=The Store;url=/company/index.shtml;");
aI("text=The Humidor ;url=/company/humidor.shtml;");
aI("text=The Lounge;url=/company/lounge.shtml;");
aI("text=Directions;url=/company/directions.shtml;");
aI("text=Contact Us;url=/company/contact.shtml;");
}

So back to square one... has anyone implemented this technique successfully? AND if so how?

Thanks!

Post by **Andy** » Mon Oct 20, 2003 10:53 am

The property you are looking for is pageimage.

You just declare the image you want to appear as path of the path. This can be the same as the on_image.

Note that this is still in early development so you may notice one or two issues, let us know if you do though.

Cheers
Andy

Monkee-Boy · Post by **Monkee-Boy** » Mon Oct 20, 2003 7:14 pm

Thanks for the confirmation of the pageimage property, Andy.

I am a little confused when you say "path of the path", though. From the code I provided above, is this the correct location for this property to appear or should it be part of the menuStyle? or part of the Main Menu code... like this:

aI("showmenu=company;image=/img/nav_company_off.gif;overimage=/img/nav_company_on.gif;pageimage=/img/nav_company_on.gif;url=/company/;");

This is where I am getting confused.. these menus are so customizable, I am not sure if where to actually add the code.

Thanks in advance!

Post by **Andy** » Mon Oct 20, 2003 7:23 pm

path of the path

Hmmm, don't remember typing that

So not sure what I was on about

Been busy today, and I'm ill

(got the flu)

However, from that I can see everything should work and your definition looks correct even through blured vision.

The best thing to do is look at the quick references. They actually take the code and build themselves based on the menu .js files (that's why they break sometimes) From looking at the styles quick ref and the items quick ref, I can see pageimage. So you may be able to declare them in either each menu item or just in the style. This still needs testing so can't 100%

I am looking at a better way of building the menus so that the properties are available wherever you are but for now what you have should work.

Cheers
Andy

Monkee-Boy · Post by **Monkee-Boy** » Mon Oct 20, 2003 8:51 pm

Andy, sorry to hear about the flu... maybe you should unplug for a couple hours and get a nappy nap.

GOOD NEWS!
Everything seems to be working dandy. I placed the code in position like above...

aI("showmenu=company;image=/img/nav_company_off.gif;overimage=/img/nav_company_on.gif;pageimage=/img/nav_company_on.gif;url=/company/;");

It works great. I will post a link in the next couple of weeks when we launch the site so you can view the beautiful menus at work.

Thanks again for the assist!