Magento 1.7.0.2更改目录页面上悬停时的产品图像 [英] Magento 1.7.0.2 change product image on hover in catalog page

问题描述

如您在此magento主题中所见，我想在目录页面上更改鼠标悬停时产品的图像:

I want to change images of products on mouse hover in the catalog page as you can see in this magento theme :

http://www.ethemeuk.com/dresscode/index.php/women-10/club-dresses.html

谢谢，我等待您的答复.

Thank you and i wait your reply.

推荐答案

如果要在鼠标悬停在&鼠标移出后显示小图像，然后通过:

If you want to show thumbnail image on mouse over & after mouse out show small image then go through :

app->design->frontend->default->your theme->template->catalog->product->list.pthml 

在此 搜索此代码:

 <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')->resize(135); ?>" width="135" height="135" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" /></a>

代替该代码:-

 <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')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(135); ?>" width="135" height="135" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" onmouseover="this.src='<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(135) ?>';" onmouseout="this.src='<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(135) ?>';" />

现在，管理员可以为缩略图和小图像分配不同的图像.当您将鼠标悬停在产品图片上时，将显示缩略图.

Now in admin assign different image for thumbnail and small image. thumbnail image will show when you mouse over on product image.

这篇关于Magento 1.7.0.2更改目录页面上悬停时的产品图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！