New image displayed on mouse over on category page

On this pages: http://toolsforchrist.com/index.php?main_page=index&cPath=1

When someone hovers over one of the images I want it to change to a different image. How can I do this? Can it be done in the product_listing.php file within the array. So it would always diplay an image, for example, where the name of the image is "..._mouseOver.jpg".

Hopefully I am making sense.

Thanks
Corey

I would modify the plugin I wrote here:

http://www.zen-cart.com/downloads.php?do=file&id=1543

This does exactly what I want, but I just cant seem to figure out what everyhting does so that I can modify it for the product description page? Can I just paste this code into the product_listing.php file?

Thanks for replying.

I think I am close to understanding what I need to do with your code. I believe I need to paste this code into my product_listing.php file and change red code. The only thing I cannot figure out is what that should be changed to.

// bof Rollover modification
// if xyz.jpg is in the images directory
// then it will show the xyz.jpg in the images/rollover directory
// both files MUST have the same name


$products_image_medium_rollover = str_replace('images','images/rollover', $products_image_medium);

?>

<style>
#productMainImage { 
  background:url("<? echo $products_image_medium_rollover;?>") no-repeat;
  background-size:<?php echo MEDIUM_IMAGE_WIDTH;?>px <?php echo MEDIUM_IMAGE_HEIGHT;?>px;
  background-position:left top;
}
#productMainImage a, #productMainImage a:link, #productMainImage a:visited {
  display:block;
}

#productMainImage a:hover img {
  visibility:hidden;
}
</style>
<?php
// eof Rollover modification

OK, I have been working on this all day and I feel like I am getting a little closer but I still cannot get it to work. here is what I think I need to do:

Put this part of the code at the end of the tpl_modules_product_listing.php or the product_listing.php file:

<style>
#listingProductImage { 
  background:url("<? echo $product_list_image_rollover;?>") no-repeat;
  background-size:<?php echo IMAGE_PRODUCT_LISTING_WIDTH;?>px <?php echo IMAGE_PRODUCT_LISTING_HEIGHT;?>px;
  background-position:left top;
}
#listingProductImage a, #listingProductImage a:link, #listingProductImage a:visited {
  display:block;
}

#listingProductImage a:hover img {
  visibility:hidden;
}
</style>

Now, this is the part I am having trouble with. I cannot figure out where this part of the code goes and exactly what the red code should be. I think I have it right now, but still not sure

$product_list_image_rollover = str_replace('images','images/rollover', $products_image);