0 Replies Latest reply on Sep 11, 2007 5:06 AM by andreia.comunica

    Behavior/ collapsible panel

    andreia.comunica
      Hello:

      I'm a portuguese designer and I'm building a web site for a client in DW CS3, but I'm quite new on the program.
      I'm using the collapsible panel as a menu, to display various sub-menu items (under each main menu item).

      For each main menu item I'm using a different image that I want to behave differently as the mouse is hover, the panel is open and panel closed... And here is my problem:
      - with the behavior "on mouse over = swap image" and "on mouse up = restore image" it seems to work, but when the panel opens I can't make the image to change a third time... the image that remains is the first one!

      summing up:
      When the panel is closed the menu item displays an image (1a) and when the mouse is over it, it should display another (1b), going back to (1a) when the mouse leaves the image.
      When the panel opens it should display a third image (1c) and go back to the first image displayed (1a) when it closes again.

      How can I fix this? with another behavior? I've tried most of them and I can't have the right effect :(

      By now the code is the following:

      </head>

      <body onload="MM_preloadImages('menu/1p.gif')">
      <div id="CollapsiblePanel1" class="CollapsiblePanel">
      <div class="CollapsiblePanelTab" tabindex="0"><img src="menu/1v.gif" width="93" height="20" id="Image1" onmouseover="MM_swapImage('Image1','','menu/1p.gif',1)" onmouseout="MM_swapImgRestore()" /></div>
      <div class="CollapsiblePanelContent">
      <p><a href=" http://www.vivoeusebio.com"><img src="menu/sub_1v.gif" alt="ingredientes" name="Image2" width="70" height="10" id="Image2" onmouseup="MM_swapImage('Image2','','menu/sub_1p.gif',0)" onmouseover="MM_swapImage('Image2','','menu/sub_1p.gif',0)" onmouseout="Swap Image Restore" /></a></p>
      <p><img src="menu/sub_2v.gif" width="46" height="10" /></p>
      <p><img src="menu/sub_3v.gif" alt="pasta" width="48" height="10" /></p>
      </div>
      </div>

      Hope you can help me and if you need further info on my problem, I'll be happy to post it here.

      Thank you so much in advance for the help

      Andreia