magento - Magento 1.7.0.2 カタログ ページでホバーすると製品イメージが変更される

Question

このmagentoテーマでわかるように、カタログページでマウスをホバーすると製品の画像を変更したい:

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

ありがとう、私はあなたの返事を待っています。

Answer 1

マウスオーバーでサムネイル画像を表示し、マウスアウト後に小さな画像を表示する場合は、次の手順を実行します。

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) ?>';" />

管理者で、サムネイルと小さな画像に異なる画像を割り当てます。商品画像にマウスオーバーするとサムネイル画像が表示されます。

Answer 2

<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(217); ?>" width="147" height="217" 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(217) ?>';" onmouseout="this.src='<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(217) ?>';" />

</a>

注: 写真の幅を 217 ピクセル以下に制限しています。デザインを反映するには、これを更新する必要があります。

Answer 3

1.9 で導入された RWD テーマを使用している場合は、59 行目のタグを次のように置き換えます。

<img id="product-collection-image-<?php echo $_product->getId(); ?>"
                 src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->keepFrame(false)->resize($_imgSize); ?>"
                 onmouseover="this.src = '<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize($_imgSize) ?>';" 
                 onmouseout="this.src = '<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize($_imgSize) ?>';"
                 alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />