UPDATE: For a smoother transistion see my solution that uses jQuery here: http://blog.kineticpulse.co.uk/2011/02/create-smoother-mouseover-effect-on.html
Merry Christmas & Happy Holidays everyone! As a small present for you all here’s how to create a neat effect to showcase your products better in a Magento catalog view.
The client had wanted to mimic the functionality she had seen on the ASOS (?) site where when you mouse over a picture of a product in the category view it shows you an alternate product view.
Here is a solution I have come up with to do this in Magento.
In the file \app\design\frontend\YOURTHEME\default\template\catalog\product\list.phtml
locate the two lines that generate the product thumbnails – in my theme and version 1.4.1.1 of Magento they are lines 52 and 93. You need to add the following javascript commands to the onmouseover and onmouseout events of the product image tag, so the following code is what I use for the the product links & images:
<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) ?>';" />
</a>
Note: I am constraining my pictures to be no more than 217 px wide – you will need to update this to reflect your design.
Explanation
The onmouseover event is getting the product image that is specified as the “thumbnail” image for the product and switching the source of the product image to be that. The onmouseout event is (hopefully) restoring this image back to the original product image (the one that is specied as the small image on the product)
Considerations for use
- Each product will obviously need a different small image & thumbnail image for this to work. Ideally of the same dimensions. The good thing about this approach is that the user will see no difference if there is only one product image per product
- This process could be improved by using a JQuery aniation to smooth the transition, I just haven’t done it here!
- Assuming that the Magento theme you are using is not much different from the default one – this should reflect across the catalog search pages as well.
See it in action here: http://www.miminoor.com/denim.html
As always I love to hear your feedback!




