Industrial Strength JavaScript and DHTML Menus
About Us
Testimonials
Contact Us
Our Distinguished Clients
Investing in Non-Profits
Where Are We
Privacy Policy
Software Licensing Agreement
DHTML JavaScript Menu
Product Information
Page Integration
Quick Reference Guides
Embedding Into a Table or DIV
Purchase
Back To Start Of Archive
Taken From The Forum: Help & Support for DHTML Menu Version 5+
Forum Topic: Click to view post
Last Updated: Saturday July 14 2012 - 06:07:35
image roll over does not work with drop down menu
Poster: Garth Hamilton
Dated: Monday August 15 2005 - 0:21:05 BST
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?
Poster: Ruth
Dated: Monday August 15 2005 - 2:29:17 BST
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:
</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"
<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:
with(mainStyle=new mm_style()){
offbgcolor="transparent";
offcolor="#515151";
onbgcolor="transparent";
oncolor="#ffffff";
}
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:
with(milonic=new menuname("Partners")){
style=menuStyle;
left="offset=40";
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
Poster: Garth Hamilton
Dated: Monday August 15 2005 - 3:21:24 BST
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
Poster: Ruth
Dated: Monday August 15 2005 - 4:45:54 BST
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:
<A
onmouseover="MM_swapImage('WagnerSteering','','mnuwagner-over.jpg',1)"
onmouseout=MM_swapImgRestore()
href="http://www.wagnersteering.ca/steering.htm"><IMG height=23
alt="Wagner Steering" src="mnuwagner.jpg" width=195
border=0 name=WagnerSteering></A>
onmouseover="MM_swapImage('WagnerSteering','','mnuwagner-over.jpg',1)"
onmouseout=MM_swapImgRestore()
href="http://www.wagnersteering.ca/steering.htm"><IMG height=23
alt="Wagner Steering" src="mnuwagner.jpg" width=195
border=0 name=WagnerSteering></A>
with this
Code:
<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>
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:
with(mainStyle=new mm_style()){
offbgcolor="transparent";
offcolor="#515151";
onbgcolor="transparent";
oncolor="#ffffff";
}
offbgcolor="transparent";
offcolor="#515151";
onbgcolor="transparent";
oncolor="#ffffff";
}
and in the Partners submenu it should be
Code:
with(milonic=new menuname("Partners")){
style=menuStyle;
left="offset=40";
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
Poster: Garth Hamilton
Dated: Monday August 15 2005 - 8:54:05 BST
Many thanks will play with this on the test bed later today and see how I make out with it.
Garth
Poster: Garth Hamilton
Dated: Monday August 15 2005 - 10:22:48 BST
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