Jump to:

17452 Posts in 4473 Topics by 1971 members

Archive

SilverStripe Forums » Archive » Menu buttons chaning on Hover when button are images

Our old forums are still available as a read-only archive.

Moderators: martimiz, Sean, biapar, Willr, Ingo, simon_w

Page: 1
Go to End
Author Topic: 1400 Views
  • mschiefmaker
    Avatar
    Community Member
    187 Posts

    Menu buttons chaning on Hover when button are images Link to this post

    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

  • Nivanka
    Avatar
    Community Member
    395 Posts

    Re: Menu buttons chaning on Hover when button are images Link to this post

    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>

    1400 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.