Image Swap that persists on Frame Menu

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:39

Image Swap that persists on Frame Menu - Version 5.727

Poster: John2005
Dated: Friday July 1 2005 - 19:36:02 BST

Hi All,

I'm using Frame Menu with version 5.727. I need to have an image swap in the main menu and have it persist when the mouse pointer moves to the submenu.

This is what i have:

aI("image=home_unsel.gif;imagewidth=100;url=body.htm;target=body;overimage=home_70_sel.gif;");

This works fine when i move the mouse over the main menu item(it changes the image) but when the pointer is in the resulting submenu, the main main item reverts back to its original image. The overimage needs to be displayed as long as the submenu is open.

This is very critical for our implementation.

Please help!!

Poster: Ruth
Dated: Saturday July 2 2005 - 1:16:58 BST

Hi John,

What is happening is this, when you mouseover an item all the mouseover functions occur. In this instance you have an overimage so as long as the mouse is on that item the overimage will be the 'operating' image. However, as soon as you mouse off that item, there is no more 'call' for that mouseover to be working and the image reverts back.

Now, there is a function that was written for someone who wanted to have a 3rd image show when you moused over a particular item in a submenu. That function mm_setParentOverImage would work if you took your over image and copied it and renamed it to something that you could call in that function. So you'd have two versions of home_70_sel.gif maybe that and home_70_sel1.gif or whatever you want to call it. Then when you moused over the item in the submenu that would be the image that would show in the main menu. To get it so that all the items in the submenu kept that as the main menu overimage you'd just call the function in each item.

Having said that, you have to think about how mouseover functions work, they do not 'change' permanently the image, they just show the image when the mouse is 'over' the item. So, each time you moved from item to item it would switch back and then switch again to the overimage. That's just how the mouseover function works.

I think possibly what you might need is the changecolorsbyclick.js module, which includes changing an image. But you'd have to set the main menu to open the subs on click. Once you click the item the image you set is what remains until another item is clicked [I think that's how it works].

Hope this helps. You'll have to test it in the frames setup, I've never tried it with that.

Ruth

Poster: John2005
Dated: Saturday July 2 2005 - 1:22:17 BST

Thank you, Ruth..

Let me try the function mm_setParentOverImage..

Poster: John2005
Dated: Tuesday July 5 2005 - 21:59:30 BST

Hi Ruth,

I can't seem to get mm_setParentOverImage work with frames. Maybe i'm doing someting wrong here..

I added the function mm_setParentOverImage in menu_data_body.js

Code:

function setParentOverImage(imageName) 
{ 
  parentItem = getParentItemByItem(_itemRef);
  
  _mi[parentItem][32] = imageName; 
   BDMenu(_mi[parentItem][0]);
}


_menuCloseDelay=400           // The time delay for menus to remain visible on mouse out
_menuOpenDelay=0            // The time delay before menus open on mouse over
_subOffsetTop=0              // Sub menu top offset
_subOffsetLeft=0            // Sub menu left offset

/// Style Definitions ///


with(subStyle=new mm_style()){
onbgcolor="#00538f";
oncolor="white";
offbgcolor="#e3eaf0";
offcolor="black";
bordercolor="#00538f";
borderstyle="solid";
borderwidth=2;
separatorcolor="#325235";
separatorsize=1;
padding=4;
fontsize=12;
fontstyle="normal";
fontfamily="Verdana, Tahoma, Arial";
subimage="submenu_arrow_right-on.gif";
onsubimage="submenu_arrow_right-off.gif";
subimagepadding="10 10 10 10";
subimageposition="right";
high3dcolor="#00538f"; //"#edf3ee";
low3dcolor="#00538f";
swap3d=1;
headerbgcolor="#00538f";
headercolor="#00538f";
outfilter="randomdissolve(duration=0.3)";
//overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=5)";
}

/// Submenu Definitions ///

with(milonic=new menuname("sub1")){
style=subStyle;
aI("text=Sub1.1;showmenu=sub1.1;onfunction=setParentOverImage('home_70_sel1.gif');offfunction=setParentOverImage('home_70_unsel.gif')");
aI("text=Sub1.2;showmenu=sub1.2;onfunction=setParentOverImage('home_70_sel1.gif');offfunction=setParentOverImage('home_70_unsel.gif')");
aI("text=Sub1.3;showmenu=sub1.3;onfunction=setParentOverImage('home_70_sel1.gif');offfunction=setParentOverImage('home_70_unsel.gif')");
aI("text=Sub1.4;showmenu=sub1.4;onfunction=setParentOverImage('home_70_sel1.gif');offfunction=setParentOverImage('home_70_unsel.gif')");
}

with(milonic=new menuname("sub2")){
style=subStyle;
aI("text=Sub2.1;showmenu=sub1.1;");
aI("text=Sub2.2;showmenu=sub1.2;");
aI("text=Sub2.3;showmenu=sub1.3;");
aI("text=Sub2.4;showmenu=sub1.4;");
}

with(milonic=new menuname("sub3")){
style=subStyle;
aI("text=Sub3.1;showmenu=sub1.1;");
aI("text=Sub3.2;showmenu=sub1.2;");
aI("text=Sub3.3;showmenu=sub1.3;");
aI("text=Sub3.4;showmenu=sub1.4;");
}

with(milonic=new menuname("sub4")){
style=subStyle;
aI("text=Sub4.1;showmenu=sub1.1;");
aI("text=Sub4.2;showmenu=sub1.2;");
aI("text=Sub4.3;showmenu=sub1.3;");
aI("text=Sub4.4;showmenu=sub1.4;");
}

with(milonic=new menuname("sub1.1")){
style=subStyle;
aI("text=Open page1;url=page1.htm;");
aI("text=Open page2;url=page2.htm;");
}

with(milonic=new menuname("sub1.2")){
style=subStyle;
aI("text=Open page1;url=page1.htm;");
aI("text=Open page2;url=page2.htm;");
aI("text=Open page3;url=page3.htm;");
}

with(milonic=new menuname("sub1.3")){
style=subStyle;
aI("text=Open page1;url=page1.htm;");
aI("text=Open page2;url=page2.htm;");
aI("text=Open page3;url=page3.htm;");
aI("text=Open page4;url=page4.htm;");
}

with(milonic=new menuname("sub1.4")){
style=subStyle;
aI("text=Open page1;url=page1.htm;");
aI("text=Open page2;url=page2.htm;");
aI("text=Open page3;url=page3.htm;");
aI("text=Open page4;url=page4.htm;");
aI("text=Open page5;url=page5.htm;target=_new;");
}

drawMenus();

heres the menu_data_header.js

Code:

_menuCloseDelay=0;           // The time delay for menus to remain visible on mouse out
_menuOpenDelay=0;            // The time delay before menus open on mouse over
_subOffsetTop=-50;             // Sub menu top offset
_subOffsetLeft=0;            // Sub menu left offset

/// Style Definitions ///

with(mainStyleHoriz=new mm_style()){
onbgcolor="#01013E";
oncolor="#ffffff";
offbgcolor="#e3eaf0";
offcolor="white";
bordercolor="#01013E";
borderstyle="solid";
borderwidth=0;
separatorcolor="#325235";
separatorsize=0;
padding=4;
fontsize=12;
fontstyle="normal";
fontfamily="Verdana, Tahoma, Arial";
subimage="";
onsubimage="";
high3dcolor="#FFFFFF";
low3dcolor="#367E45";
swap3d=1;
}

// Main Menu

with(milonic=new menuname("mainMenuHoriz")){
style=mainStyleHoriz;
top=50;
left=0;
orientation="horizontal";
alwaysvisible=1;
aI("image=home_70_unsel.gif;imagewidth=100;url=body.htm;target=body;overimage=home_70_sel.gif;");
aI("image=myself_70_unsel.gif;imagewidth=100;overimage=myself_70_sel.gif;showmenu=sub1;target=body;onfunction=openSubmenu();offfunction=closeSubmenu();");
aI("image=my_staff_70_unsel.gif;imagewidth=100;overimage=my_staff_70_sel.gif;showmenu=sub2;target=body;onfunction=openSubmenu();offfunction=closeSubmenu();");
aI("image=my_company_90_unsel.gif;imagewidth=100;overimage=my_company_90_sel.gif;showmenu=sub3;target=body;onfunction=openSubmenu();offfunction=closeSubmenu();");

}

drawMenus();

HEADER.HTM

Code:

<html>
<head>
<title>Frames Test</title>

<style>

body {
  background-color: #01013E;
  margin-left: 0;
  margin-top; 0;
  font-family: Verdana, Tahoma, Arial;
  font-size: 10px;
}

</style>


<script type="text/javascript" src="milonic_src.js"></script>
<script type="text/javascript">
if(ns4)_d.write("<scr"+"ipt type=text/javascript src=mmenuns4.js><\/scr"+"ipt>");
  else _d.write("<scr"+"ipt type=text/javascript src=mmenudom.js><\/scr"+"ipt>");
</script>


<script language=Javascript src="menu_data_header.js" type=text/javascript></script>
<script language=Javascript src="mm_navframe.js" type=text/javascript></script>

</head>

<body marginwidth="0" marginheight="0">



</body>
</html>

BODY.HTM

Code:

<html>
<head>
<title>Frames Test</title>

<link rel="stylesheet" type="text/css" href="frames.css">


<script type="text/javascript" src="milonic_src.js"></script>
<script type="text/javascript">
if(ns4)_d.write("<scr"+"ipt type=text/javascript src=mmenuns4.js><\/scr"+"ipt>");
  else _d.write("<scr"+"ipt type=text/javascript src=mmenudom.js><\/scr"+"ipt>");
</script>


<script type="text/javascript" src="menu_data_body.js"></script>
</head>

<body>


</body>
</html>

INDEX.HTM

Code:

<html>

<head>
<title>Frames Test</title>
</head>

<frameset rows="70,*">

   <frame name="header" scrolling="no" noresize target="main" src="header.htm" FRAMEBORDER=0>
    <frame name="body"  src="body.htm" FRAMEBORDER=0>
</frameset>

</html>

THIS IS THE JS ERROR I GET

Code:

Error: _mi[parentItem] has no properties
Source File: file:Desktop/Milonic_5_727_Frames/menu_data_body.js
Line: 5

Poster: Ruth
Dated: Wednesday July 6 2005 - 4:56:19 BST

Hi John,

This is something that Kevin or Andy will have to address. I was afraid that it wouldn't work without some kind of modification for frames.

It's telling you that the 'parentItem' has no properties because the parent item is in the main 'header' menu_data_header.js menu file. The mm_navframes.js module is a javascript function to let the menu read and put the submenus into the body frame. I'm sorry I'm not technically knowledgeable enough to actually give the info in those terms, but I think of it like this. The header and body 'windows' are like two different browsers, and that module let's the menu in the one window open the submenus in a different window. So, when you mouseover the item in the submenu as far as it can find there is no 'parent' item that it can find, since it's back in the header window. [sort of]

If this is a professional version. I suggest you contact Milonic directly. I will post to Kevin and Andy about it, but I'm not sure how long a reply might be, I believe Kevin is out for some days yet.

Out of curiosity, if this is excessively critical to your site, have you considered using an iframe? That function will work with an iframe.
Ruth

Poster: John2005
Dated: Wednesday July 6 2005 - 23:23:24 BST

Hi Ruth. Thats what i figured too.. It can't find the parent item in the header frame.

Hopefully Kevin or Andy can help me with providing the required modification for frames.

As you suggested i contacted Milonic directly through the support form.

we started off with iframe menu but encountered problems with iframe scroll bar customization. Didn't want to add too many work arounds for iframe structure..

Thank you

Poster: Ruth
Dated: Thursday July 7 2005 - 2:53:07 BST

Hi,

Are you talking about customizing the scroll bar for IE? I am desiging my site now to use an iframe and I've customized the scroll bar for the iframe with no problem. Maybe I could help if you could post the trouble, but, I'm going to be gone probably until Saturday or Sunday starting tomorrow.

Ruth

Industrial Strength JavaScript and DHTML Menus

Image Swap that persists on Frame Menu - Version 5.727