Swap image with onmousehover event does not come back

0

I have created an event based on other codes adapting to mine to change the image of one clothes to another, only it is only "going" and coming back very fast (half bugged).

I would like it to look like this site here: link This is mine: duetju.com.br

My code looks 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 it? Thanks

    
asked by anonymous 19.07.2016 / 15:22

1 answer

0

The source (the src declared in the onmouseout event block) is different from the declared in 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. Use CSS styles instead of scripts;
  • 2. Do not declare events in HTML lines.
19.07.2016 / 16:23