Image change on click, change back on submenu close

[t.wood]

Hi,

I am thinking of using your menu system in our product. I am currently experimenting with it to see if it can do what we need.

I have a main menu, with two items. Both items are just images (no text). The second of the items opens a submenu when clicked.

I would like the image on the second item to change when it is clicked (i.e. when the submenu opens), which I can do using "clickimage". But I would like the image to change back when the submenu subsequently closes (for example, when the user takes their mouse cursor off the submenu).

Is this possible? How would I go about it?

Thanks,

Tim

[Ruth]

Hi,

Could you post a test page so some of us can experiment with doing that?

Ruth

[t.wood]

Hi,

Here is an example page:

http://snow.actofdefiance.co.uk/menus/example3.html

The right hand part of the menu changes image when it is clicked, but it stays that way until it is clicked again. I would like it to change back whenever the sub menu closes (e.g. when the user takes their mouse off it).

Thanks,

Tim

[Migru]

Hi

you are using

Code: Select all

bgimage=RH_MO.png;clickbgimage=RH_clicked.png;

instead of that try

Code: Select all

bgimage=RH_MO.png;overbgimage=RH_clicked.png;openonclick=1;

I hope it will work as you want
Michael

[Ruth]

Hi Tim,

The other option you can try is closeonclick and keepalive in the submenu, and change from using a bgimage to an image. This will make the image change back, but that's because the person will have to click the image again to close the submenu.

Code: Select all

<SCRIPT language=JavaScript type=text/javascript>
      fixMozillaZIndex=true;
      _menuCloseDelay=500;
      _menuOpenDelay=150;
      _subOffsetTop=2;
      _subOffsetLeft=-2;

   with(submenuStyle=new mm_style()){
      borderstyle="solid";
      bordercolor="black";
      borderwidth=1;
      margin=4;
      offbgcolor="white";
      itemheight="16";
      padding=2;
   }
   
   with(easyreachStyle=new mm_style()){
      openonclick=1;
	  closeonclick=1;
   } 
   
   with(milonic=new menuname("EasyReach")){
      orientation="vertical";
      style=submenuStyle;
      ignorecollision=1;
	  keepalive=1;
      aI("text=abcd;");
      aI("text=efgh;");
      aI("text=ijkl...;");
    }

with(milonic=new menuname("EasyReachBar")){
      orientation="horizontal";
      style=easyreachStyle;
      alwaysvisible=true;
      position="relative";
      aI("url=http://milonic.com;image=Call_MO.png;imagewidth=23;imageheight=20");
      aI("image=RH_MO.png;clickimage=RH_clicked.png;showmenu=EasyReach;imageheight=20;
imagewidth=11;itemwidth=11;itemheight=20;");
   }
</SCRIPT>

Ruth

[t.wood]

Hi Michael,

Thanks for your reply. I have modified the example page to work like this. This method does make the image stay changed untill the sub menu closes. However, is it possible to have the image change only after it has been clicked, not when the user puts their mouse over it?

Thanks,

Tim

[t.wood]

Hi Ruth,

I didn't know about the "closeonclick" property. I have added your suggestion to my example page. I'm not sure if I can ask the users to click again to close the menu. I will show it to a few testers and find out, but I suspect they will object.

I also noticed, that by double clicking on the righthand menu item, I can ocassionally make it stay in the clicked state even when the submenu has closed (although, I don't think that is a serious issue).

I'll take these suggestion to our designer and see what he makes of them, unless anyone has any other ideas?

Thanks for your help,

Tim

[Migru]

Hi t.

it is not correct to place the 3 different solutions into one file as it is.
The menus are faulty !! This gives a complete wrong picture of suggestions, as for instance the sub is twinkling , what it normally will never do. I think this comes from placing the Drawmenu command repeatedly into a table cell.
It is better just to place three "main menus" entirely into a table cell each including a drawMenu for each of them, with all three "mains" using the same number of subs with one additional common DrawMenu() below the standard global settings and styles.

Michael