Magento change product image on hover in catalog page

If you want to show thumbnail image on mouse over & after mouse out show small image then go through

template->catalog->product->list.pthml

in this Search this code:

<a href=”<?php echo $_product->getProductUrl() ?>” title=”<?php echo $this->stripTags($this->getImageLabel($_product, ‘small_image’), null, true) ?>”><img src=”<?php echo $this->helper(‘catalog/image’)->init($_product, ‘small_image’)->resize(135); ?>” width=”135″ height=”135″ alt=”<?php echo $this->stripTags($this->getImageLabel($_product, ‘small_image’), null, true) ?>” /></a>

in place of that put this code :

<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(217); ?>" width="147" height="217" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" onmouseover="this.src='<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(217) ?>';" onmouseout="this.src='<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(217) ?>';" />