Exchanging image with event onmousehover does not return

Question

Guys, I created an event based on other codes adapting to mine to change the image of one outfit, for another, only it’s just "going" and coming back very fast (half bugger).

I’d like it to look like this site here: https://amaro.com/moda-feminina/blusas Mine is this: duetju.com.br

My code is like this:

<?php
                                $product = Mage::getModel('catalog/product')->load($_product->getId());
                                $helper = Mage::Helper('catalog/image');
                                foreach ($product->getMediaGalleryImages() as $image) {


                                }
                                ?>
                                    <img class="<?php if ($alt_img): ?>em-alt-org<?php endif ?>" src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize($w,$h) ?>" width="<?php echo $w; ?>" height="<?php echo $h ;?>" alt="<?php echo $this->stripTags($_product->getName(), null, true) ?>" onmouseover="this.src='<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $image->getFile())->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE) ?>';"
onmouseout="this.src='<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE) ?>';"/>

What’s wrong with him? Thank you

Answer 1

The source (the src declared in the event block onmouseout) is different from the one stated at the beginning...

<?php

$initial_img = $this->helper('catalog/image')
                  ->init($_product, 'small_image')
                  ->resize($w,$h);

$hover_img = $this->helper('catalog/image')
                  ->init($this->getProduct(), 'thumbnail', $image->getFile())
                  ->constrainOnly(FALSE)
                  ->keepAspectRatio(TRUE)
                  ->keepFrame(FALSE);

?>

<?php
    echo '<img class="'.$alt_img.'em-alt-org" src="'.$initial_img.'" width="'.$w.'" height="'.$h.'" alt="'.$this->stripTags($_product->getName(), null, true).'" onmouseover="this.src = \''.$hover_img.'\'" onmouseout="this.src = \''.$initial_img.'\'"/>';
?>

---

But you could:

• 1 . Using CSS styles instead of scripts;
• 2 . Do not declare events in HTML lines.