Image change on click, change back on submenu close

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

Image change on click, change back on submenu close

Poster: t.wood
Dated: Friday February 3 2006 - 18:33:01 GMT

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

Poster: Ruth
Dated: Saturday February 4 2006 - 0:25:08 GMT

Hi,

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

Ruth

Example

Poster: t.wood
Dated: Monday February 6 2006 - 11:56:15 GMT

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

Poster: Migru
Dated: Monday February 6 2006 - 12:58:16 GMT

Hi

you are using

Code:

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

instead of that try

Code:

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

I hope it will work as you want
Michael

Poster: Ruth
Dated: Monday February 6 2006 - 13:15:17 GMT

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:

<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://www.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

Poster: t.wood
Dated: Monday February 6 2006 - 13:22:34 GMT

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

Poster: t.wood
Dated: Monday February 6 2006 - 13:45:34 GMT

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

Poster: Migru
Dated: Monday February 6 2006 - 23:53:27 GMT

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

Industrial Strength JavaScript and DHTML Menus

Image change on click, change back on submenu close

Example