magento on hover change product image in catalog.

Hello

I am One Issue. I am change image in product listing page. when i am hover the image it can be change image after mouse out then default image can be see.

I am Writing code for that you can check that can help you.

 <?php $defaultSelectedImage = basename($this->helper('catalog/image')->init($_product, 'small_image')->resize(215));?>
         
            <?php  $defaultSelectedImage_url = $this->helper('catalog/image')->init($_product, 'small_image')->resize(215);  ?>
                   <?php $_galleryImages = Mage::getModel('catalog/product')->load($_product->getId())->getMediaGalleryImages();
               
                        foreach($_galleryImages as $_gimages){
                            $gallerySelectedImage = basename($this->helper('catalog/image')->init($_product, 'small_image',$_gimages->getFile())->resize(215));
                       
                           if($defaultSelectedImage != $gallerySelectedImage){
                       
                     
                       
                       
                             $_hover_image = $this->helper('catalog/image')->init($_product, 'small_image',$_gimages->getFile())->resize(215);
                           
                             break;
                       
                     
                       
                         
                        }
                       
                        }
                    ?>  
<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image">
             

 <img onmouseover="this.src = '<?php echo $_hover_image; ?>';"  src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(215); ?>"
                onmouseout="this.src = '<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(215) ?>';"
                 alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
            </a>

check this code it can be Look Good.

Tweet