i'm building store website, , on item page there color options. click on color option , changes photo show user, , there's hidden input who's value supposed update chosen color, can't work right.
in $(document).ready(function() have javascript populating input's value, works occasionally, less not. code have seems me should work. i'm not sure i'm missing or doing wrong @ point.
here's code
in head:
<script type="text/javascript"> function color(option) { document.getelementbyid('photo').src = '../img/tshirts/shirts/' + option + '.jpg'; document.getelementbyid('item-color').value = option; } </script> in body:
<div id="photo-wrapper"> <img id="photo" src="../img/tshirts/shirts/charcoal-black.jpg" /> <input type="hidden" id="item-color" name="item-color" value="charcoal-black" /> <div id="colors"> <a href="javascript:color('aqua');"><img class="swatch" src="../img/tshirts/swatches/aqua.png" title="aqua"/></a> <a href="javascript:color('athletic-grey');"><img class="swatch" src="../img/tshirts/swatches/athletic-grey.png" title="athletic grey"/></a> <a href="javascript:color('berry');"><img class="swatch" src="../img/tshirts/swatches/berry.png" title="berry"/></a> <a href="javascript:color('blue');"><img class="swatch" src="../img/tshirts/swatches/blue.png" title="blue"/></a> <a href="javascript:color('brown');"><img class="swatch" src="../img/tshirts/swatches/brown.png" title="brown"/></a> <a href="javascript:color('charcoal-black');"><img class="swatch" src="../img/tshirts/swatches/charcoal-black.png" title="charcoal black"/></a> <a href="javascript:color('clay');"><img class="swatch" src="../img/tshirts/swatches/clay.png" title="clay"/></a> <a href="javascript:color('emerald');"><img class="swatch" src="../img/tshirts/swatches/emerald.png" title="emerald"/></a> <a href="javascript:color('green');"><img class="swatch" src="../img/tshirts/swatches/green.png" title="green"/></a> <a href="javascript:color('grey');"><img class="swatch" src="../img/tshirts/swatches/grey.png" title="grey"/></a> <a href="javascript:color('maroon');"><img class="swatch" src="../img/tshirts/swatches/maroon.png" title="maroon"/></a> <a href="javascript:color('navy');"><img class="swatch" src="../img/tshirts/swatches/navy.png" title="navy"/></a> <a href="javascript:color('orange');"><img class="swatch" src="../img/tshirts/swatches/orange.png" title="orange"/></a> <a href="javascript:color('purple');"><img class="swatch" src="../img/tshirts/swatches/purple.png" title="purple"/></a> <a href="javascript:color('red');"><img class="swatch" src="../img/tshirts/swatches/red.png" title="red"/></a> <a href="javascript:color('solid-black');"><img class="swatch" src="../img/tshirts/swatches/solid-black.png" title="solid black"/></a> <a href="javascript:color('teal');"><img class="swatch" src="../img/tshirts/swatches/teal.png" title="teal"/></a> <a href="javascript:color('true-royal');"><img class="swatch" src="../img/tshirts/swatches/true-royal.png" title="true royal"/></a> </div> </div>
i'm going save lot of time, don't set option via javascript, set default option via putting value in hidden input element.
you can change later js.
Comments
Post a Comment