A quick guide to adding a mouse over image change to your product category pages in Magento #Magento

Mar 10, 2014

This code can give great results in enhancing the user experience of the Magento category pages.

app-design-frontend-your package->your theme-template->catalog-product-list.pthml

on  line 116 for Grid view and on line 50 for list View, change:

<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>


<a class=”product-image” href=”<?php echo $_product->getProductUrl() ?>”>                                 <img src=”<?php echo $this->helper(‘catalog/image’)->init($_product, ‘small_image’)->resize(208); ?>” alt=”<?php echo $this->stripTags($this->getImageLabel($_product, ‘small_image’)) ?>” onmouseover=”this.src=’<?php echo $this->helper(‘catalog/image’)->init($_product, ‘thumbnail’)->resize(208) ?>’;” onmouseout=”this.src=’<?php echo $this->helper(‘catalog/image’)->init($_product, ‘small_image’)->resize(208) ?>’;” />
Change 208 to the size of your image element.
We now need to assign a different image for thumbnail and small image, small image is the default category image and thumbnail image will show when you mouse over.. job done.
Facebook IconTwitter IconVisit Joe on Linked In