Lets create new image attribute first at: magento admin > Catalog > Attributes > Manage Attributes > Add New Attribute
Set Attribute Properties as below:
Attribute Code *: hover_image
Scope: Store View
Catalog Input Type for Store Owner: Media Image
Apply To *: All Product Types
Manage Label 'admin': Hover image
Save this new attribute and go to manage attribute set at:
magento admin > Catalog > Attributes > Manage Attribute Sets.
Click on your attribute e.g. Defaults. Then drag 'hover_image' from Unassigned Attributes to group Images and Save attribute set.
Now edit your product and assign image to hover image that you want to display on list page on mouse over.
Go to one of your extension and open config.xml file from etc folder and add hover_image on product collection.
<?xml version="1.0"?>
<config>
<frontend>
<product>
<collection>
<attributes>
<hover_image />
</attributes>
</collection>
</product>
</frontend>
</config>
Now go to your mysql and run:
mysql > select e.attribute_id,c.is_visible_on_front,c.is_visible,c.used_in_product_listing,e.attribute_code from catalog_eav_attribute c, eav_attribute e where e.attribute_id = c.attribute_id and e.frontend_input = 'media_image';
Check if hover_image has value 1 under column used_in_product_listing, if not update it with value 1.
Now go to your shell and run reindex as:
shell > php indexer.php reindexall
Now you have everything ready for backend. Now time for frontend edit.
First duplicate:
skin/frontend/base/default/images/catalog/product/placeholder/image.jpg
and rename duplicate image to
skin/frontend/base/default/images/catalog/product/placeholder/hover_image.jpg
Open magento product list template file:
app/design/frontend/base/default/template/catalog/product/list.phtml
in editor and find:
<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) ?>" />
And replace it with:
<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) ?>" onmouseover="this.src='<?php echo $this->helper('catalog/image')->init($_product, 'hover_image')->resize(135) ?>';" onmouseout ="this.src='<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135) ?>';" />
All that you required to have a hover image in your list page. You can copy above code to other templates to have same effect.
Need your help.
""Check if hover_image has value 1 under column used_in_product_listing, if not update it with value 1.""
In my case, the value =0, and i can't change it. i have always an error:
A fatal JavaScript error has occurred. Would you like to send an error report?
Do you have a solution ??
My theme is in localhost now.
Thanks.