Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Archive /

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

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

Menu buttons chaning on Hover when button are images


Reply


2 Posts   1459 Views

Avatar
mschiefmaker

Community Member, 187 Posts

14 November 2008 at 6:38am

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

Avatar
Nivanka

Community Member, 400 Posts

16 November 2008 at 6:26am

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>