0

I want to add a hover image for my product.

So the first step :

1- i've create a new attribute with code named hover_image for all types of the products.

2- in php file catalog->product->list.phtml i've add onmouseover javascript function to image tag like below

onmouseover="this.src='<?php echo $this->helper('catalog/image')->init($_product, 'hover_image')->resize(500,659)?>'"

but it's not working any suggestions ?

12
  • put it in media/catalog/product/placeholder and provide what you are adding /storing in that attribute? – Gopal Patel Mar 6 '17 at 7:38
  • but the url value is the path of the hover_image in media folder i want to get the hover_image value selected for the product in the admin . – mahmoudismail Mar 6 '17 at 7:41
  • sry but still not clear – Gopal Patel Mar 6 '17 at 7:44
  • i've update my question – mahmoudismail Mar 6 '17 at 7:46
  • just place your image in media/catalog/product/placeholder – Gopal Patel Mar 6 '17 at 7:50
1

here is working code you can try this

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

Load again

$product=Mage::getModel('catalog/product')->load($_product->getId());

Now try with new object

echo $this->helper('catalog/image')->init($_product, 'hover_image')->resize(500,659)
4
0

Here is a complete working code you can use, please remember to upload placeholder

 <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image">
    <?php $hoverImage = $this->helper('catalog/image')->init($_product, 'hover_image')->resize(300,470)->setQuality(100);
    if (strpos($hoverImage, 'place-holder') == false) { ?>
    <img id="product-collection-image-<?php echo $_product->getId(); ?>"
        src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(300,470)->setQuality(100); ?>"
        alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>"
        onmouseover="this.src='<?php echo $this->helper('catalog/image')->init($_product, 'hover_image')->resize(300,470)->setQuality(100) ?>';"
        onmouseout="this.src='<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(300,470)->setQuality(100); ?>';"
    />


    <?php } else { ?>
    <img id="product-collection-image-<?php echo $_product->getId(); ?>"
    src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(300,470)->setQuality(100); ?>"
    alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>"

    />        
    <?php } ?>
</a>

You can uplaod place holder via backend System > Configtration > Catlouge > product image placeholder

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.