Swap Magento Product images based on custom option

Question

My products are displayed in a grid format, and purchased directly from this page. They are simple products with custom options. Each option is a color. Is there a way to assign an image to each product/color combo and display that image when the drop down for the associated color is is selected?

 ` <?php $_collectionSize = $_productCollection->count() ?>
    <?php $_columnCount = $this->getColumnCount(); ?>
    <?php $i=0; foreach ($_productCollection as $_product): ?>
        <?php if ($i++%$_columnCount==0): ?>
        <ul class="products-grid">
        <?php endif ?>
            <li class="productthumb" item<?php if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>">
<a href="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(600); ?>" rel="lightbox" title="<?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?>" />
               <img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(220); ?>" width="220" height="160" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" /></a>
                <h2 class="product-name"><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></h2>
                <?php if($_product->getRatingSummary()): ?>
                <?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
                <?php endif; ?>
                <?php echo $this->getPriceHtml($_product, true) ?>
                <form action="<?php echo Mage::getBaseUrl(); ?>checkout/cart/add/" method="post" style="display:block; clear:both;"> 
`

Answer 1

There are several commercial modules promising this functionality on the product page but not the category page. Therefore there is no off the shelf easy option.

For reasons of SKU count, ordering from the category page and database maintainability, configurable products may not be the way to go here.

A simple workaround is to create media/swatch/red.jpg, media/swatch/orange.jpg, media/swatch/redgreenstripes.jpg and so on. Then in the frontend code, pull up the swatch matching the option required. For each colour option you'll need to strtolower the code, concatenate it with get-base-dir-media-swatches and pop it in an image tag.

A Blutak and string solution? Yes, but you won't need to spend all day writing a module.