Galera, would like to switch from one outfit to another over the mouse, I made one code but is a bit buggy.

I would like this site here: https://amaro.com/moda-feminina/blusas Mine is this: duetju.com.br

My code looks here is:

$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 did is wrong in it? Thank you

<script type="text/javascript">
     function swap(image) {
         document.getElementById("main").src = image.href;

 <img id="main" src="images/4.jpg" width="50">

 <a href="images/1.jpg" onclick="swap(this); return false;"><img src="images/1.jpg"></a>
 <a href="images/2.jpg" onclick="swap(this); return false;"><img src="images/2.jpg"></a>
 <a href="images/3.jpg" onclick="swap(this); return false;"><img src="images/3.jpg"></a>


There is nothing wrong in your code, however when I checked you item HTML I found that due to <span class="bkg-hover"></span> tag which is inserted below your <img> tag cause the issue and your hover effect is not properly functional.

Please remove this tag and all goods to go.

Let me know if you have any query.

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.