Image rollovers with Dynamic Menu Highlighting

Hello all,

I have been trying to add some image rollovers to a currently working dynamic menu I am using. So far I have tried techniques with both CSS and Javascript inorder to insert rollover/hover images but none of it seems to be working.

If someone could have a look at my current code structure and suggest the best way possible integrate image rollovers on all the menu links that aren’t active (the rollover would simply be the same as the active image).

The blog: https://www.georgehajian.co.nz/wordpress/weblog

Menu code

<div id="nav">
    <ul class="menu">

     <li>
     <a href="<?php bloginfo('siteurl'); ?>">
     <img src="<?php bloginfo('stylesheet_directory'); ?><?php if (is_page('Home')) {echo "/images/buttons/home_active.jpg";}else echo "/images/buttons/home_inactive.jpg" ?>" width="88" height="24" alt="home"/></a>
     </a>
     </li>

     <li class="spacer">
     <a href="https://www.georgehajian.co.nz/wordpress/weblog">
     <img src="<?php bloginfo('stylesheet_directory'); ?><?php if (is_home()) {echo "/images/buttons/weblog_active.jpg";}else echo "/images/buttons/weblog_inactive.jpg" ?>" width="115" height="23" alt="weblog"/></a>
     </li>
 	 <li class="spacer">
     <a href="https://www.georgehajian.co.nz/wordpress/category/art">
     <img src="<?php bloginfo('stylesheet_directory'); ?><?php if (is_category('Art')) {echo "/images/buttons/art_active.jpg";}else echo "/images/buttons/art_inactive.jpg" ?>" height="23" alt="art"/></a></li>
     <li class="spacer">
     <a  href="https://www.georgehajian.co.nz/wordpress/resume"><img src="<?php bloginfo('stylesheet_directory'); ?><?php if (is_page('Resume')) {echo "/images/buttons/resume_active.jpg";}else echo "/images/buttons/resume_inactive.jpg" ?>" width="116" height="24" alt="resume"/></a>
     </li>
    </ul>
    </div>

Many thanks.