Magento : How to create mouseover images in best-sellers.phtml file?

Question

In Magento "best-sellers" block, I have fixed images that I want to replace with mouseover images.

Here is the initial code in best-sellers.phtml :

<div>
   <a href="<?php echo $_product->getProductUrl($_product); ?>">
      <img src="<?php echo $_imgHelper->init($_product, 'thumbnail')->resize(220, 276); ?>" width=« 220" height=« 276" alt="<?php echo $_product->getName(); ?>" />
   </a>
</div>

I changed the inital code to this :

<img onmouseover="this.src='http://www.mywebsite/media/wysiwyg/chaise-design-italie-hip_trans-Verso_1.png';             
" onmouseout="this.src="<?php echo $_imgHelper->init($_product, 'thumbnail')->resize(220, 276); ?>" 
" src="<?php echo $_imgHelper->init($_product, 'thumbnail')->resize(220, 276); ?>" 
width=« 220" height=« 276" alt="<?php echo $_product->getName(); ?>" />

The result is : the source image appears, the mouseover image appears BUT nothing happens on mouseout, it keeps showing the mouseover image.

Any idea what I did wrong ?

Many thanks for your help !

Answer 1

please refer to this may be it can help you http://magentocodes.blogspot.in/2013/09/change-product-image-on-hover-in.html