mouseover navigation buttons

[wimpie]

little info about how to make a simple mouseover change if you use navigation buttons.
Many custom skins got images for home, user cp, calendar etc.
Now what would look much better, is if those buttons would change by mouseover.
make sure you have 2 gif images for each button..if you use blog or gallery, add extra to the script.

here the code for default ipb skin:
global_board_header


<!--ipb.javascript.start-->
<script type="text/javascript">
<!--
var ipb_var_st = "{ipb.input['st']}";
var ipb_lang_tpl_q1 = "{ipb.lang['tpl_q1']}";
var ipb_var_s = "{ipb.session_id}";
var ipb_var_phpext = "{ipb.vars['php_ext']}";
var ipb_var_base_url = "{ipb.script_url}";
var ipb_input_f = "{ipb.input['f']}";
var ipb_input_t = "{ipb.input['t']}";
var ipb_input_p = "{ipb.input['p']}";
var ipb_var_cookieid = "{ipb.vars['cookie_id']}";
var ipb_var_cookie_domain = "{ipb.vars['cookie_domain']}";
var ipb_var_cookie_path = "{ipb.vars['cookie_path']}";
//-->
</script>
<script type="text/javascript" src='jscripts/ipb_global.js'></script>
<!--ipb.javascript.end-->
<!--custom.javascript.start-->
<SCRIPT>
<!--
function chkVer(imagename,objectsrc)
{
var n=navigator.appName
var v=p****Int(navigator.appVersion)
var browsok=((n=="Netscape")&&(v>=3))
var browsok2=((n=="Microsoft Internet Explorer")&&(v>=4))
if ((browsok)||(browsok2))
document.images[imagename].src=eval(objectsrc+".src")
}
//-->
</SCRIPT>

<SCRIPT language="javascript1.1">
if( document.images )
{
<!--On & Off-->
but1 = new Image(75,25) ; <!--image width,height-->
but1.src = "style_images/<#IMG_DIR#>/home_over.gif";
but2 = new Image(75,25) ;
but2.src ="style_images/<#IMG_DIR#>/home.gif";
but3 = new Image(75,25) ; <!--image width,height-->
but3.src = "style_images/<#IMG_DIR#>/usercp_over.gif";
but4 = new Image(75,25) ;
but4.src ="style_images/<#IMG_DIR#>/usercp.gif";
but5 = new Image(75,25) ; <!--image width,height-->
but5.src = "style_images/<#IMG_DIR#>/members_over.gif";
but6 = new Image(75,25) ;
but6.src ="style_images/<#IMG_DIR#>/members.gif";
but7 = new Image(75,25) ; <!--image width,height-->
but7.src = "style_images/<#IMG_DIR#>/calendar_over.gif";
but8 = new Image(75,25) ;
but8.src ="style_images/<#IMG_DIR#>/calendar.gif";
but9 = new Image(75,25) ; <!--image width,height-->
but9.src = "style_images/<#IMG_DIR#>/search_over.gif";
but10 = new Image(75,25) ;
but10.src ="style_images/<#IMG_DIR#>/search.gif";
but11 = new Image(75,25) ; <!--image width,height-->
but11.src = "style_images/<#IMG_DIR#>/faq_over.gif";
but12 = new Image(75,25) ; <!--image width,height-->
but12.src = "style_images/<#IMG_DIR#>/faq.gif";
<!--Add additional sets as needed-->
}
</SCRIPT>
<!--custom.javascript.end-->

<div class="borderwrap">
<div id="logostrip"><a href='{ipb.script_url}'><!--ipb.logo.start--><img src='style_images/<#IMG_DIR#>/logo4.gif' style='vertical-align:top' alt='IPB' border='0' /><!--ipb.logo.end--></a></div>
<div id="submenu" align="center">
<p class="home"><!--ipb.leftlinks.start--><!--IBF.RULES--><!--ipb.leftlinks.end--></p>


<!-- This is navigation/button area -->

<td class="navbar" align="center"><A HREF = "{ipb.vars['home_url']}"
onmouseover="chkVer('go1','but1')"
onmouseout="chkVer('go1','but2')"><IMG NAME = "go1" width=75 height=25 border=0 SRC = "style_images/<#IMG_DIR#>/home.gif"></A><A HREF
= "{ipb.script_url}act=UserCP&amp;CODE=00"
onmouseover="chkVer('go2','but3')"
onmouseout="chkVer('go2','but4')"><IMG NAME = "go2" width=75 height=25 border=0 SRC = "style_images/<#IMG_DIR#>/usercp.gif"></A><A HREF = "{ipb.script_url}act=Members"
onmouseover="chkVer('go3','but5')"
onmouseout="chkVer('go3','but6')"><IMG NAME = "go3" width=75 height=25 border=0 SRC = "style_images/<#IMG_DIR#>/members.gif"></A><A HREF = "{ipb.script_url}act=calendar"
onmouseover="chkVer('go4','but7')"
onmouseout="chkVer('go4','but8')"><IMG NAME = "go4" width=75 height=25 border=0 SRC = "style_images/<#IMG_DIR#>/calendar.gif"></A><A HREF = "{ipb.script_url}act=Search&amp;f={ipb.input['f']}"
onmouseover="chkVer('go5','but9')"
onmouseout="chkVer('go5','but10')"><IMG NAME = "go5" width=75 height=25 border=0 SRC = "style_images/<#IMG_DIR#>/search.gif"></A><A HREF = "{ipb.script_url}act=Help"
onmouseover="chkVer('go6','but11')"
onmouseout="chkVer('go6','but12')"><IMG NAME = "go6" width=75 height=25 border=0 SRC = "style_images/<#IMG_DIR#>/faq.gif"></A><!--IBF.RULES--><!--IBF.CHATLINK--><!--IBF.TSLLINK-->
</td>

<!--End navigation/button area -->

<p><!--ipb.rightlinks.start-->
<if="ipb.vars['blog_default_view'] != """>
<a href="{ipb.script_url}automodule=blog">{ipb.lang['blog']}</a>
</if>
<if="ipb.vars['gallery_images_path'] != ''">
<a href="{ipb.script_url}act=module&module=gallery">{ipb.lang['gallery']}</a>
</if>

<!--IBF.CHATLINK--><!--IBF.TSLLINK-->
<!--ipb.rightlinks.end--></p>


</div>
</div>