Hi
I have a nav script
<% control Menu(1) %>
<% if LinkOrSection = section %>
<img src="/themes/purplewine/images/menu/{$URLSegment}navCurrent.gif" alt="$Title" /><span>$URLSegment</span>
<% else %>
<a href="$Link" title="Go to the $Title.XML page" ><img src="/themes/purplewine/images/menu/{$URLSegment}nav.gif" alt="$Title" /><span>$URLSegment</span></a>
<% end_if %>
<% end_control %>

This changes the image on the button for the current page but I am having problems getting my head around how to make them change with the mouse. I know I could do this by setting up records in the CSS for each individual button but this menu has sub-menus I would prefer not to have to hardcode it all. Can anyone point in the direction of the right documentation or suggest how to solve this?

Thanks

MM

I think you can do this with a javascript easily.

<% control Menu(1) %>
<% if LinkOrSection = section %>
<img src="/themes/purplewine/images/menu/{$URLSegment}navCurrent.gif" alt="$Title"  id="{$URLSegment}" onmouseover="changebg(this, true,'{$URLSegment}navCurrent')" onmouseout="changebg(this, false,'{$URLSegment}nav')" /><span>$URLSegment</span>
<% else %>
<a href="$Link" title="Go to the $Title.XML page" ><img src="/themes/purplewine/images/menu/{$URLSegment}nav.gif" alt="$Title" id="{$URLSegment}"  onmouseover="changebg(this, true,'{$URLSegment}nav')" onmouseout="changebg(this, false,'{$URLSegment}nav')" /><span>$URLSegment</span></a>
<% end_if %>
<% end_control %> 

After that add the following code in the header section, between the head tag

<script type="text/javascript">
     
     function changebg(vr img,var mouseup,var image){
          if(mouseup){
                    document.getElementById.(img).src = "themes/purplewine/images/menu/{$URLSegment}navCurrent-mouseup.gif";
          }

          else{
                    document.getElementById.(img).src = "themes/purplewine/images/menu/{$URLSegment}navCurrent.gif";
          }
    }

</script>