call two images in list.phtml in magento 1.9.2.4

Question

onmouseout I want to display the second image of the product.

<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'); ?>"  onmouseover="this.src = '<?php echo $this->helper('catalog/image')->init($_product, 'small_image'); ?>';" 
                 onmouseout="this.src = '<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>';" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
</a>

i used this code but it will display two images consectively and i am unable to seperate them for onmouseover and onmouseout.

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

foreach ($product->getMediaGalleryImages() as $image) {
    echo var_export($image->getUrl());
} 
 ?>

Answer 1

try this with id

<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image'); ?>" id="imageid"  onmouseover="document.getElementById('imageid').src = '<?php echo $this->helper('catalog/image')->init($_product, 'small_image'); ?>';" 
                 onmouseout="document.getElementById('imageid').src = '<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>';" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />

for separate the images

<?php 
$product = Mage::getModel('catalog/product')->load($_product->getId());
$img=array();
foreach ($product->getMediaGalleryImages() as $image) {
    $img[]=$image->getUrl();
} 
?>

simple separate with $img[0] for first and $img[1] for second

Answer 2

In edition of @Qaisar answer

If you enable flat table then <?php echo $this->helper('catalog/image')->init($_product, 'image'); ?> does not give you image url because of Base image(attribute code image) does not included at flat table.

In order to image get image field value,you need to enable image at flat table. See How to add Image attribute in Product Flat Catalog

Answer 3

Try this:

<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, 'image')->resize(135); ?>"
         width="135"
         height="135"
         class="product-image-first"
         alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>"
        />
    <?php
/** @var Mage_Catalog_Model_Product $_product */
$_product->load('media_gallery');
$collection = $_product->getMediaGalleryImages();
foreach ($collection as $_image):
    if ($_image->getPosition() != 2) {
        continue;
    }
    ?>
    <img
        src="<?php echo $this->helper('catalog/image')->init($_product, 'image', $_image->getFile())->resize(135); ?>"
        width="135"
        height="135"
        class="product-image-second"
        alt="<?php echo $this->escapeHtml($_image->getLabel()) ?>"
        style="display: none;"
        />
    <?php
endforeach;
?>

Add script at bottom of page:

    var productImagesFirst = document.querySelectorAll('.product-image');
    for (var key in productImagesFirst) {
        if (productImagesFirst.hasOwnProperty(key) && productImagesFirst[key] instanceof Element) {
            var productImage = productImagesFirst[key];
            console.log(productImage);
            productImage.addEventListener('mouseenter', function(e){
                var first = e.target.querySelector('.product-image-first');
                var second = e.target.querySelector('.product-image-second');
                if (second) {
                    first.hide();
                    second.show();
                }
            });
            productImage.addEventListener('mouseleave', function(e){
                var first = e.target.querySelector('.product-image-first');
                var second = e.target.querySelector('.product-image-second');
                if (second) {
                    first.show();
                    second.hide();
                }
            });
        }
    }