image roll over does not work with drop down menu

[Garth Hamilton]

using download V5.728 Milonic Pop up Menu
License Number: 199130
Licensed Web Site: http://www.wagnersteering.ca


I am using this code and I get the image rollover happening properly


<TD><A HREF="enter.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('home','',' images/new_nav/home-over.jpg',1)">
<img src="images/new_nav/home-over.jpg" name="enter" width="102" height="23" border="0"></a></TD>


however when I change it to add a drop down menu the rollover function appears to be lost as the image does not appear to change but the Drop down boxes work fine just the highlight image does not display. Here is the code I am using


<TD><A HREF="steering.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('wagner','',' images/new_nav/wagner-over.jpg',1)">
<img src="images/new_nav/wagner.jpg" name="wagner steering" width="145" height="23" border="0"
name=wagnersteer id=mmenu2 onmouseover=" popup('wagnersteer','mmenu2')" onmouseout=popdown()></a></TD>


Any ideas on a solution to this?

[Ruth]

Hi,

I don't really know how to do the swap images with the pop menu, but you could just use a regular Milonic menu in the table cells to achieve the same effect.

Code: Select all

</div><center><table width="750" border="0" cellspacing="0" cellpadding="0" align="center"><tr>
<td background="mnubackground.jpg" width="90" align="center"></td>
<TD align=middle width=180 background=mnubackground.jpg>
<script>
with(milonic=new menuname("Enter")){
style=mainStyle;
position="relative";
alwaysvisible=1;
orientation="horizontal";
aI("image=mnuenter.jpg;overimage=mnuenter-over.jpg;url=enter.htm;");
}
drawMenus();
</script>
 </TD>
  <TD align=middle width=180 background=mnubackground.jpg>
<script>
with(milonic=new menuname("Steering")){
style=mainStyle;
position="relative";
alwaysvisible=1;
orientation="horizontal";
aI("image=mnuwagner.jpg;overimage=mnuwagner-over.jpg;url=steering.htm;showmenu=partners;");
}
drawMenus();
</script>
</TD>
   <TD align=middle width=180 background=mnubackground.jpg>
<script>
with(milonic=new menuname("Showcase")){
style=mainStyle;
position="relative";
alwaysvisible=1;
orientation="horizontal";
aI("image=mnushowcase.jpg;overimage=mnushowcase-over.jpg;url=showcase.htm;");
}
drawMenus();
</script>
</TD>
 <td background="mnubackground.jpg" width="90" align="center"></td> </tr></table></center><div align="center"

I created another style for those 'main' menus. I made it minimal, since you don't need anything really. But, you could code into each 'main' menu a pageimage, if you wanted a different image to show when the user was on the related page i.e on showcase.htm you could use the overimage as the page image, or maybe make the pretty light blue of the overimage a different color and have that the page image.

Code: Select all

with(mainStyle=new mm_style()){
offbgcolor="transparent";
offcolor="#515151";
onbgcolor="transparent";
oncolor="#ffffff";
}

Then in the submenu you want to have drop down, for example the partners menu example you gave, you would code left="offset=X"; based on your main menu image size so the submenu would drop where you want it.

This is what i put for that partners

Code: Select all

with(milonic=new menuname("Partners")){
style=menuStyle;
left="offset=40";

Finally, the menu should not be in a div, it causes problems in the cross-browser compatibility because of how the different browsers treat divs differently. So, if you look at the table I posted, the beginning taq is an ending div tag for your div and then the ending after the table is another beginning div tag to continue your div. That's what most people who use divs with the menu in a table do, remove the table from the div and in a centered site use center tags to center that table.

There may be a way to do the switch of images and show the menu onmouseover with the popup menu sample, but I don't know how to do it.
Hope this helps.

Ruth

[Garth Hamilton]

Hi Ruth

thanks for the reply but it is not immediately clear to me where the 2nd and 3rd bits of code should go.

All I am trying to acheive is have the rollover image visible when the drop box is down as it would when there is no drop box. I do not need to have the box highlighted when the page is open on onmouseover

I will have to go a check the various pages for the /div as it is not present in my test page but using Front Page it can appear anytime you cut and past using a template.

regards
Garth

[Ruth]

Hi,

Sorry, I guess I wasn't too clear. I don't know how to combine the rollover function you have with the automatic image rollover of the menu and the built in pop function. I wasn't sure if you wanted the ability to drop menus on all those rollovers so I did the whole table, but if you're only doing it on the one image, then replace this section

Code: Select all

<A 
      onmouseover="MM_swapImage('WagnerSteering','','mnuwagner-over.jpg',1)" 
      onmouseout=MM_swapImgRestore() 
      href="http://websites.milonic.com/wagnersteering.ca/steering.htm"><IMG height=23 
      alt="Wagner Steering" src="mnuwagner.jpg" width=195 
      border=0 name=WagnerSteering></A>

with this

Code: Select all

<script>
			with(milonic=new menuname("Steering")){
style=mainStyle;
position="relative";
alwaysvisible=1;
orientation="horizontal";
aI("image=mnuwagner.jpg;overimage=mnuwagner-over.jpg;url=steering.htm;showmenu=partners;");
}
drawMenus();
</script>

add this style code to the menu_data.js file, the one where you are calling the partners submenu

Code: Select all

with(mainStyle=new mm_style()){
offbgcolor="transparent";
offcolor="#515151";
onbgcolor="transparent";
oncolor="#ffffff";
}

and in the Partners submenu it should be

Code: Select all

with(milonic=new menuname("Partners")){
style=menuStyle;
left="offset=40";

This let's you shift the submenu Partners under the image right or left.

That is the only way I know to get both the rollover you want and the submenu to show. There may be a way to combine the function you have with the automatic popup function in the Milonic Menu but I don't know how to do that.

Ruth

[Garth Hamilton]

Many thanks will play with this on the test bed later today and see how I make out with it.

Garth

[Garth Hamilton]

Hi Ruth

just could not put this down and sleep so went back at it

could not get your code to work for me but have a look at

http://www.wagnersteering.ca/about.htm

I seem to have it all working now and the the code I am using does not seem a great deal different

<td>
<a onmouseover="MM_swapImage('home','','
images/new_nav/home-over.jpg',1)"
onmouseout="MM_swapImgRestore()" href="home.htm">
<img height="23" ALT="Home" src="images/new_nav/home.jpg"
width="102" border="0" name="home"></a>
</td>
<td>
<a onmouseover="MM_swapImage('steering','','
images/new_nav/wagner-over.jpg',1)"
onmouseout="MM_swapImgRestore()" href="steering.htm">
<img id="mmenu2" onmouseover="popup
('wagnersteer','mmenu2')" ALT="Wagner Steering"
onmouseout="popdown()" height="23"
src="images/new_nav/wagner.jpg" width="156" border="0"
name="steering"></a>
</td>
etc

many thanks
Garth