Login | Forgot password | Register
What is OpenID?
OpenID is an Internet-wide identity system that allows you to sign in to many websites with a single account.
With OpenID, your ID becomes a URL (e.g. http://username.myopenid.com/). You can get a free OpenID for example from myopenid.com.
For more information visit the official OpenID site.
Archive
SilverStripe Forums » Archive » Menu buttons chaning on Hover when button are images
Our old forums are still available as a read-only archive.
|
Page:
1
|
Go to End | |
| Author | Topic: Menu buttons chaning on Hover when button are images | 277 Views |
-
Menu buttons chaning on Hover when button are images
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
-
Re: Menu buttons chaning on Hover when button are images
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>
| 277 Views | ||
|
Page:
1
|
Go to Top |
Currently Online: There is nobody online.
Welcome to our latest member: marcusl
