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
in this
Search this code:
<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>
in place of that put this code :-
<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.
Comments
Post a Comment
Feel Free To Ask...