Javascript:
Código Javascript:
Ver original
<script type="text/javascript"> function anadir(obj) { anadir1(obj); if (obj.name =='search_query1'){ anadirImgSQ1();} } function anadir1(obj) { var radios = document.getElementsByTagName('input'); var value; obj.form.search_query.value = ""; for (var i = 0; i < radios.length; i++) { if (radios[i].type === 'radio' && radios[i].checked) { value = radios[i].value; obj.form.search_query.value = obj.form.search_query.value + value; } } } function anadirImgSQ1(){ var radio = document.getElementsByName('search_query1'); var colorPelo = document.getElementById('colorPelo'); if (radio[0].checked){ colorPelo.src = "http://ritsi.org/wp-content/uploads/2013/03/luis_cabeza_honorifico.jpg"; } if (radio[1].checked){ colorPelo.src = "http://entimg.msn.com/i/150/Movies/Actors4/brigged0194557_150x200.jpg"; } } </script>
Código HTML:
Código HTML:
Ver original
<div id="personalshoppers"> <div id="personalshoppers_left"> <div id="search_block_left" class="block exclusive"> <form name="formulario" method="post" action="{$link->getPageLink('search', true)}" id="searchbox"> <p class="block_content"> <input type="hidden" name="orderby" value="position" /> <input type="hidden" name="controller" value="search" /> <input type="hidden" name="orderway" value="desc" /> <!-- Selectores Personal Shoppers --> <div> <input type="radio" name="search_query1" value="moreno " onchange="anadir(this)" />Moreno <input type="radio" name="search_query1" value="Rubio " onchange="anadir(this)" />Rubio </div> <div> <input type="radio" name="search_query2" value="con curvas " onchange="anadir(this)"/>con Curvas <input type="radio" name="search_query2" value="atletica " onchange="anadir(this)" />Atlética </div> <div> <input type="radio" name="search_query3" value="atrevida " onchange="anadir(this)" />Atrevida <input type="radio" name="search_query3" value="elegante " onchange="anadir(this)" />Elegante </div> <input class="search_query" type="text" id="search_query_block" name="search_query" value="" /> <input type="submit" id="search_button" class="button_mini" value="{l s='Go!' mod='blocksearch'}" /> </p> </form> </div> </div> <div id="personalshoppers_right"> </div> </div>
en los div de cabello, silueta y estilo se mostrarían las imágenes que además cambiaran según los botones radios seleccionados.