Question: **Aim:** to realize the product image auto change on mouseover action in the category grid view in **Magento**.

I'll apologize first that I am no coder, so please bear with me for my silly questions.

I figured the following code with realize the image change function:

```
<a href="TARGET URL GOES HERE"><img src="URL OF FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF FIRST IMAGE GOES HERE'" /></a>

```

However, I will need to determine whether there is a second image for the product first, then if there is, I will need to call out the URL of the second image for the function to work.

I guess it requires a piece of php code to do that.

I'd appreciate the help from anyone with the question.

Best Regards
Liang

**PS:** Here's a bit more info about the page.
Variables:

```
<?php
    $_productCollection=$this->getLoadedProductCollection();
    $_helper = $this->helper('catalog/output');
?>

```

This is the bit of code which calls out the main/first image.

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

```

Answer: 
**For Magento** 

To get OnMouseOver to change the image and show the default thumbnail in the product grid or list views, add the following code to the list.phtml file of your theme:

```
onmouseover="this.src='<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(135,135) ?>';" 
onmouseout="this.src='<?phpecho $this->helper('catalog/image')->init($_product, 'small_image')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(135,135) ?>';"

```

The new code will be:

```
<a href="<?php echo $_product->getProductUrl() ?>"
   title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>"
   class="product-image">
     <img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135, 135); ?>"
          width="135" height="135"
          alt="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>"
          onmouseover="this.src='<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(135,135) ?>';"
          onmouseout="this.src='<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(135,135) ?>';"/>
</a>

```
This can get the second image,but can't resize it.

```
<?php $_productImage = Mage::getModel('catalog/product')->load($_product->getId());foreach ($_productImage->getMediaGalleryImages() as $image) { $_productGallery = $image->getUrl();break;};echo $_productGallery; ?>

```

Good luck!