How are configurable options rendering on frontend

Question

i need to add data-imagesrc="imgurl" inside <option> tag. It should look something like

<option value="16" price="0" data-label="grey" data-imagesrc="imgurl">Grey</option>

And when i see the rendered part of configurable options (app/design/frontend/<mypackage>/<mytheme>/template/catalog/product/view/type/options/configurable.phtml)

$_attributes = Mage::helper('core')->decorateArray($this->getAllowAttributes());
<?php foreach($_attributes as $_attribute): ?>
    <?php
    $_rendered = false;
    foreach ($_renderers as $_rendererName):
        $_renderer = $this->getChild('attr_renderers')->getChild($_rendererName);
        if (method_exists($_renderer, 'shouldRender') && $_renderer->shouldRender($_attribute, $_jsonConfig)):
            $_renderer->setProduct($_product);
            $_renderer->setAttributeObj($_attribute);
            echo $_renderer->toHtml();
            $_rendered = true;
            break;
        endif;
    endforeach;

    if (!$_rendered):
    ?>
    <dt><label class="required"><em>*</em><?php echo $_attribute->getLabel() ?></label></dt>
    <dd<?php if ($_attribute->decoratedIsLast){?> class="last"<?php }?>>
        <div class="input-box">
                <select name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]" id="attribute<?php echo $_attribute->getAttributeId() ?>" class="required-entry super-attribute-select">
                    <option><?php echo $this->__('Choose an Option...') ?></option>
                </select>
          </div>
    </dd>
    <?php endif; ?>
<?php endforeach; ?>

From where are those options being rendered ? and how can i add data-imagesrc inside option tag of configurable combobox ?

I'm trying to achieve like shown on the image below, and i am doing with a jquery plugin.

Answer 1

Unfortunately for you those options are rendered in Prototype so you will have to connect it with jQuery.
File location:
js/varien/configurable.js
I would suggest you to take a close look at fillSelect function inside of it. All the information is gathered inside Mage_Catalog_Block_Product_View_Type_Configurable::getJsonConfig function.
Good luck!