rollover image menu with current page active

Hi there
I’ve created a nav bar for this site – [url]http://web11.3essentials.com/~cp27358/[/url] – I’m using javascript to handle the image rollover which is working just fine. However I want to add to this so that the current page will stay with the second or rollover image. How would you suggest I edit or add to my code so it keeps the second image active if it is the active page?

In my script file this is what I’m using for an image:

menu1buttonup = new Image();
menu1buttonup.src = “http://web11.3essentials.com/~cp27358/wp-content/themes/origin/images/menu1.jpg” ;
menu1buttondown = new Image() ;
menu1buttondown.src = “http://web11.3essentials.com/~cp27358/wp-content/themes/origin/images/menu1a.jpg” ;

followed by….

function buttondown( buttonname )
{
if (document.images) {
document[ buttonname ].src = eval( buttonname + “down.src” );
}
}
function buttonup ( buttonname )
{
if (document.images) {
document[ buttonname ].src = eval( buttonname + “up.src” );
}
}

and this is what my list items look like:

<a href=”<?php echo home_url(); ?>/?page_id=7″ onmouseover=”buttondown(‘menu1button’)”
onmouseout=”buttonup(‘menu1button’)”><img src=”<?php bloginfo(‘template_url’); ?>/images/menu1.jpg” name=”menu1button” /></a>

thank you

Also in #JavaScript _↴