How to display images combinations replacing colors attribute product page

[ad3r]

Hi,

my question is simple i want to change normal attribute colors combination in my page product and remplace them by images products

 

how can i do it

my code:

													<div class="attribute_list">
														{if ($group.group_type == 'select')}
															<select name="{$groupName}" id="group_{$id_attribute_group|intval}" class="form-control attribute_select no-print">
																{foreach from=$group.attributes key=id_attribute item=group_attribute}
																	<option value="{$id_attribute|intval}"{if (isset($smarty.get.$groupName) && $smarty.get.$groupName|intval == $id_attribute) || $group.default == $id_attribute} selected="selected"{/if} title="{$group_attribute|escape:'html':'UTF-8'}">{$group_attribute|escape:'html':'UTF-8'}</option>
																{/foreach}
															</select>
														{elseif ($group.group_type == 'color')}
															<ul id="color_to_pick_list" class="clearfix">
																{assign var="default_colorpicker" value=""}
																{foreach from=$group.attributes key=id_attribute item=group_attribute}
																	{assign var='img_color_exists' value=file_exists($col_img_dir|cat:$id_attribute|cat:'.jpg')}
																	<li{if $group.default == $id_attribute} class="selected"{/if}>
															<img src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default')|escape:'html':'UTF-8'}" class="xx" />
                                                                        <a href="{$link->getProductLink($product)|escape:'html':'UTF-8'}" id="color_{$id_attribute|intval}" name="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" class="color_pick{if ($group.default == $id_attribute)} selected{/if}"{if !$img_color_exists && isset($colors.$id_attribute.value) && $colors.$id_attribute.value} style="background:{$colors.$id_attribute.value|escape:'html':'UTF-8'};"{/if} title="{$colors.$id_attribute.name|escape:'html':'UTF-8'}">