Magento 1.9 – Display Images Instead of Custom Option Values

we are adding Custom options to the products with custom options Values as "Black" & "Green".

in frontend , its displaying like below image as in link1 :

But instead of text – Black & Green , i want to display images as below….

i uploaded Black & Green images to below path :

if custom option value is green, i want to display below image :

http://sbdev2.kidsdial.com:81/media/catalog/custom/green.png

if custom option value is black, i want to display below image :

http://sbdev2.kidsdial.com:81/media/catalog/custom/black.png

app/design/frontend/base/default/template/catalog/product/view/options/type/select.phtml

<?php /* @var $this Mage_Catalog_Block_Product_View_Options_Type_Select */ ?>
<?php $_option = $this->getOption() ?>
<dt><label<?php if ($_option->getIsRequire()) echo ' class="required"' ?>><?php if ($_option->getIsRequire()) echo '<em>*</em>' ?><?php echo  $this->escapeHtml($_option->getTitle()) ?></label></dt>
<dd<?php if ($_option->decoratedIsLast){?> class="last"<?php }?>>
    <div class="input-box">
        <?php echo $this->getValuesHtml() ?>
        <?php if ($_option->getIsRequire()): ?>
            <?php if ($_option->getType() == Mage_Catalog_Model_Product_Option::OPTION_TYPE_RADIO || $_option->getType() == Mage_Catalog_Model_Product_Option::OPTION_TYPE_CHECKBOX): ?>
                <span id="options-<?php echo $_option->getId() ?>-container"></span>
            <?php endif; ?>
        <?php endif;?>
    </div>
</dd>