Mouseover Problems

lesley · Post by **lesley** » Wed Apr 06, 2005 4:32 pm

I've set up a menu at http://www.advertisebydesign.co.uk/milonic/ and when I mouseover any of the menu items they are very slow to load the image, leaving the menu item with a transparent background. Even once they've loaded if you move up and down the list quickly they don't show properly.

This only happens in IE - Firefox and Opera have no problem at all. I am using the latest version of the menu.

I've tried preloading the images in the body tag but it makes no difference.

Can anyone help?

The code is:

Code: Select all

with(background=new mm_style()){
bgimage="menujs/submenu.gif";
borderstyle="solid";
fontfamily="Arial";
fontsize="12px";
fontstyle="normal";
fontweight="normal";
image="menujs/transparent.gif";
imagepadding=4;
itemheight=25;
itemwidth=150;
offcolor="#FFFFFF";
oncolor="#D6E6FE";
overbgimage="menujs/menu_on.gif";
subimage="menujs/arrow_down.gif";
subimagepadding=8;
}

with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
itemheight=25;
itemwidth=150;
left=30;
orientation="horizontal";
style=background;
top=100;
aI("bgimage=menujs/menu_off.gif;image=menujs/blank.gif;overbgimage=menujs/menu_on.gif;status=Who we are ;text=Who we are;url=who.php;");
aI("bgimage=menujs/menu_off.gif;image=menujs/blank.gif;overbgimage=menujs/menu_on.gif;showmenu=What;text=What we do;url=what.php;");
aI("bgimage=menujs/menu_off.gif;image=menujs/blank.gif;overbgimage=menujs/menu_on.gif;showmenu=How;text=How we deliver;url=how.php;");
aI("bgimage=menujs/menu_off.gif;image=menujs/blank.gif;overbgimage=menujs/menu_on.gif;showmenu=Offer;text=What we offer;url=offer.php;");
aI("bgimage=menujs/menu_off.gif;image=menujs/blank.gif;overbgimage=menujs/menu_on.gif;status=Contact;text=Contact us;url=contact.php;");
}

with(milonic=new menuname("What")){
style=background;
itemheight=55;
itemwidth=250;

aI("fontsize=11px;subimage=menujs/arrow_right.gif;bgimage=menujs/submenulg.gif;image=menujs/blank.gif;overbgimage=menujs/submenulg.gif;text=Menu1;showmenu=PWM;");
aI("fontsize=11px;subimage=menujs/arrow_right.gif;bgimage=menujs/submenulg.gif;image=menujs/blank.gif;overbgimage=menujs/submenulg.gif;text=Menu2;showmenu=Der;");
aI("fontsize=11px;subimage=menujs/arrow_right.gif;bgimage=menujs/submenulg.gif;image=menujs/blank.gif;overbgimage=menujs/submenulg.gif;text=Menu3;showmenu=Str;");
aI("fontsize=11px;subimage=menujs/arrow_right.gif;bgimage=menujs/submenulg.gif;image=menujs/blank.gif;overbgimage=menujs/submenulg.gif;text=Menu4;showmenu=Hig;");
aI("fontsize=11px;subimage=menujs/arrow_right.gif;bgimage=menujs/submenulg.gif;image=menujs/blank.gif;overbgimage=menujs/submenulg.gif;text=Menu5;showmenu=Lev;");
aI("fontsize=11px;subimage=menujs/arrow_right.gif;bgimage=menujs/submenulg.gif;image=menujs/blank.gif;overbgimage=menujs/submenulg.gif;text=Menu6;showmenu=DCMO;");
aI("fontsize=11px;subimage=menujs/arrow_right.gif;bgimage=menujs/submenulg.gif;image=menujs/blank.gif;overbgimage=menujs/submenulg.gif;text=Menu7;showmenu=IRTT;");
aI("fontsize=11px;subimage=menujs/arrow_right.gif;bgimage=menujs/submenulg.gif;image=menujs/blank.gif;overbgimage=menujs/submenulg.gif;text=Menu8;showmenu=Hed;");
aI("fontsize=11px;subimage=menujs/arrow_right.gif;bgimage=menujs/submenulg.gif;image=menujs/blank.gif;overbgimage=menujs/submenulg.gif;text=Menu9;showmenu=Hes;");
aI("fontsize=11px;subimage=menujs/arrow_right.gif;bgimage=menujs/submenulg.gif;image=menujs/blank.gif;overbgimage=menujs/submenulg.gif;text=Menu10;showmenu=Sec;");
aI("fontsize=11px;subimage=menujs/arrow_right.gif;bgimage=menujs/submenulg.gif;image=menujs/blank.gif;overbgimage=menujs/submenulg.gif;text=Menu11;showmenu=Ass;");
aI("fontsize=11px;subimage=menujs/arrow_right.gif;bgimage=menujs/submenulg.gif;image=menujs/blank.gif;overbgimage=menujs/submenulg.gif;text=Menu12;showmenu=FoF;");
aI("fontsize=11px;subimage=menujs/arrow_right.gif;bgimage=menujs/submenulg.gif;image=menujs/blank.gif;overbgimage=menujs/submenulg.gif;text=Menu13;showmenu=Cas;");
aI("fontsize=11px;subimage=menujs/arrow_right.gif;bgimage=menujs/submenulg.gif;image=menujs/blank.gif;overbgimage=menujs/submenulg.gif;text=Menu14;showmenu=Fix;");
aI("fontsize=11px;subimage=menujs/arrow_right.gif;bgimage=menujs/submenulg.gif;image=menujs/blank.gif;overbgimage=menujs/submenulg.gif;text=Menu15;showmenu=UKI;");
aI("fontsize=11px;subimage=menujs/arrow_right.gif;bgimage=menujs/submenulg.gif;image=menujs/blank.gif;overbgimage=menujs/submenulg.gif;text=Menu16;showmenu=Mid;");
aI("fontsize=11px;subimage=menujs/arrow_right.gif;bgimage=menujs/submenulg.gif;image=menujs/blank.gif;overbgimage=menujs/submenulg.gif;text=Menu17;showmenu=Inv;");
}

with(milonic=new menuname("PWM")){
style=background;
itemheight=55;
itemwidth=311;
aI("fontsize=11px;bgimage=menujs/submenuxlg.gif;image=menujs/blank.gif;overbgimage=menujs/submenuxlg.gif;text=Menu 1 Team;url=team.php;");
aI("fontsize=11px;bgimage=menujs/submenuxlg.gif;image=menujs/blank.gif;overbgimage=menujs/submenuxlg.gif;text=Menu 1 Track Record;url=track.php/;");
}
with(milonic=new menuname("Der")){
style=background;
itemheight=55;
itemwidth=311;
aI("fontsize=11px;bgimage=menujs/submenuxlg.gif;image=menujs/blank.gif;overbgimage=menujs/submenuxlg.gif;text=Menu 2 Team;url=team.php;");
aI("fontsize=11px;bgimage=menujs/submenuxlg.gif;image=menujs/blank.gif;overbgimage=menujs/submenuxlg.gif;text=Menu 2Track Record;url=track.php/;");
}

Post by **Ruth** » Wed Apr 06, 2005 6:39 pm

Downlaod the Image Pre-loading module. Upload the module and place the call for it after the menus have been built i.e. after the call for the menus.

Code: Select all

<script language="JavaScript1.2" type="text/javascript" src="preloadmenuimages.js"></script>

using your own path to the module.

Ruth

Post by **John** » Wed Apr 06, 2005 7:57 pm

First thing I'd do is build a second style for the menus starting with 'What' and below. Get all that stuff out of there that should be in a style.

You also have a lot in your Main Menu that can go back into the existing style.

lesley · Post by **lesley** » Thu Apr 07, 2005 9:59 am

Many thanks for your help. I've done both of those but it doesn't seem to have made any difference. I reduced the number of menu items to see if that was a problem but again no difference.

I've included my updated code and any further suggestions would be greatly appreciated.

Code: Select all

_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=0;
_subOffsetLeft=0;


with(background=new mm_style()){
bgimage="menujs/menu_on.gif";
borderstyle="solid";
fontfamily="Arial";
fontsize="12px";
fontstyle="normal";
fontweight="normal";
image="menujs/blank.gif";
imagepadding=4;
itemheight=25;
itemwidth=150;
offcolor="#FFFFFF";
oncolor="#D6E6FE";
overbgimage="menujs/menu_on.gif";
subimage="menujs/arrow_down.gif";
subimagepadding=8;
}

with(submenu=new mm_style()){
bgimage="menujs/submenuxlg.gif";
borderstyle="solid";
fontfamily="Arial";
fontsize="11px";
fontstyle="normal";
fontweight="normal";
image="menujs/blank.gif";
imagepadding=4;
itemheight=25;
itemwidth=250;
offcolor="#FFFFFF";
oncolor="#D6E6FE";
overbgimage="menujs/submenuxlg.gif";
subimage="menujs/arrow_down.gif";
subimagepadding=8;
}

with(submenu2=new mm_style()){
bgimage="menujs/submenuxlg.gif";
borderstyle="solid";
fontfamily="Arial";
fontsize="11px";
fontstyle="normal";
fontweight="normal";
image="menujs/blank.gif";
imagepadding=4;
itemheight=25;
itemwidth=311;
offcolor="#FFFFFF";
oncolor="#D6E6FE";
overbgimage="menujs/submenuxlg.gif";
subimage="menujs/arrow_down.gif";
subimagepadding=8;
}

with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
itemheight=25;
itemwidth=150;
left=30;
orientation="horizontal";
style=background;
top=100;
aI("status=Who we are ;text=Who we are;url=who.php;");
aI("showmenu=What;text=What we do;url=what.php;");
aI("showmenu=How;text=How we deliver;url=how.php;");
aI("showmenu=Offer;text=What we offer;url=offer.php;");
aI("status=Contact;text=Contact us;url=contact.php;");
}

with(milonic=new menuname("What")){
style=submenu;

aI("text=Menu1;showmenu=PWM;");
aI("text=Menu2;showmenu=Der;");
aI("text=Menu3;showmenu=Str;");
aI("text=Menu4;showmenu=Hig;");
}

with(milonic=new menuname("PWM")){
style=submenu2;
aI("text=Menu 1 Team;url=team.php;");
aI("text=Menu 1 Track Record;url=track.php/;");
}
with(milonic=new menuname("Der")){
style=submenu2;
aI("text=Menu 2 Team;url=team.php;");
aI("text=Menu 2 Track Record;url=track.php/;");
}
with(milonic=new menuname("Str")){
style=submenu2;
aI("text=Menu 3 Team;url=sp_team.php;");
aI("text=Menu 3 Track Record;url=sp_track.php/;");
}
with(milonic=new menuname("Hig")){
style=submenu2;
aI("text=Menu 4 Team;url=team.php;");
aI("text=Menu 4 Track Record;url=track.php/;");
}

with(milonic=new menuname("How")){
style=submenu;
aI("status=Case history one;text=Case history one;url=http://www.caseHistory.php/;");
aI("status=Case history two;text=Case history two;url=http://www.caseHistory.php/;");
}

with(milonic=new menuname("Offer")){
style=submenu;
aI("text=Candidates;url=candidates.htm;");
aI("text=Employees;url=employees.htm;");
}

drawMenus();

_menuCloseDelay=500;
_menuOp

Many thanks