Change nav-buttons on hover

[Ninjadude101]

In my nav bar (the one with home, user cp, FAQ etc) i'd like it so when you hover over a button, the image changes. This way i can make similar buttons, which appear to colorize the text on hover.

How do i get it to change the picture on hover?

[Jake Bunce]

The navbar links use this class:

Admin CP -> Styles & Templates -> Style Manager -> Main CSS (in the menu) -> Popup Menu Controls

That class has a hover attribute you can set.

[Ninjadude101]

https://www.aouv.co.uk

The very top navbar you see, is made up of seperate images. This is part of the style i use. There is a navbar template, which i will be able to figure out certain things, i just need the CSS code to set styles whilst hovering over it.

for example: (this is some css i made to display a picture as the background.)

style="background:#F5F5FF url({IF}/gradients/gradient_postinfo.gif) repeat-y top left; color:#474747;"

All i need is the css code to change properties on hover.

[Ninjadude101]

Wait, no..

<img src="{IF}/misc/navi_home.gif" alt="Home" />

I know that this says to use /misc/navi_home.gif
I need to modify this to basically say to use /misc/navi_home.gif, but on hover change to /misc/navi_home2.gif

Any suggestions?

[Ninjadude101]

If anyone else was interested in this:

I modified the navbar buttons code i found in the header template.

<!-- Ninja Nav Buttons -->
<div id="navi">
<a href="$vboptions[forumhome].php$session[sessionurl_q]" onmouseover="document.images['s1a'].src='{IF}/misc/navi_home2.gif';" onmouseout="document.images['s1a'].src='{IF}/misc/navi_home.gif';"><img src="{IF}/misc/navi_home.gif" name="s1a" height="21" 
width="78" alt="Home" border="0"></a>
<if condition="$show['member']">
<a href="usercp.php$session[sessionurl_q]" onmouseover="document.images['s2a'].src='{IF}/misc/navi_ucp2.gif';" onmouseout="document.images['s2a'].src='{IF}/misc/navi_ucp.gif';"><img src="{IF}/misc/navi_ucp.gif" name="s2a" height="21" 
width="78" alt="User Control Panel" border="0"></a>
</if>
<if condition="$show['registerbutton']">
<a href="register.php$session[sessionurl_q]" onmouseover="document.images['s3a'].src='{IF}/misc/navi_register2.gif';" onmouseout="document.images['s3a'].src='{IF}/misc/navi_register.gif';"><img src="{IF}/misc/navi_register.gif" name="s3a" height="21" 
width="78" alt="Register now!!" border="0"></a>
</if>
$template_hook[navbar_buttons_left]
<a href="faq.php$session[sessionurl_q]" onmouseover="document.images['s4a'].src='{IF}/misc/navi_faq2.gif';" onmouseout="document.images['s4a'].src='{IF}/misc/navi_faq.gif';"><img src="{IF}/misc/navi_faq.gif" name="s4a" height="21" 
width="78" alt="Frequently Asked Questions" border="0"></a>
<if condition="$vboptions['enablememberlist']">
<a href="memberlist.php$session[sessionurl_q]" onmouseover="document.images['s5a'].src='{IF}/misc/navi_members2.gif';" onmouseout="document.images['s5a'].src='{IF}/misc/navi_members.gif';"><img src="{IF}/misc/navi_members.gif" name="s5a" height="21" 
width="78" alt="Member List" border="0"></a>
</if>
<a href="calendar.php$session[sessionurl_q]" onmouseover="document.images['s6a'].src='{IF}/misc/navi_calendar2.gif';" onmouseout="document.images['s6a'].src='{IF}/misc/navi_calendar.gif';"><img src="{IF}/misc/navi_calendar.gif" name="s6a" height="21" 
width="78" alt="Calendar" border="0"></a>
<a href="search.php$session[sessionurl_q]" id="navbar_search" accesskey="4" rel="nofollow" onmouseover="document.images['s7a'].src='{IF}/misc/navi_search2.gif';" onmouseout="document.images['s7a'].src='{IF}/misc/navi_search.gif';"><img src="{IF}/misc/navi_search.gif" name="s7a" height="21" 
width="78" alt="Search" border="0"></a>
<if condition="$show['quicksearch']"><script type="text/javascript">vbmenu_register("navbar_search",1);</script></if>
<if condition="$show['member']">
<a href="$show[nojs_link]#usercptools" id="usercptools" onmouseover="document.images['s8a'].src='{IF}/misc/navi_ql2.gif';" onmouseout="document.images['s8a'].src='{IF}/misc/navi_ql.gif';"><img src="{IF}/misc/navi_ql.gif" name="s8a" height="21" 
width="78" alt="Quick Links" border="0"></a><script type="text/javascript">vbmenu_register("usercptools",1);</script>
</if>
$template_hook[navbar_buttons_right]
</div>
<!-- End Ninja Nav Buttons -->

However, the last 2 buttons do not properly work, due to the dropdown menus (Search and quick links)

See it in action (If you want) www.aouv.co.uk

[Jake Bunce]

I don't have code to do that, but I think it requires javascript code to create rollover images. A google search will probably turn up code that you can use.

[legionofangels2]

I think it can be done in PHP as well as Flash. I've seen it on forums, and it might even be JS to, but its' very easy to do from what a flash coder told me, so I'd just hire one of them to do it in 10 minutes or so. Providing of course you have the alternate images.