change image using foo color box

Question

will it be possible to display an image inside a container div every time i click on a foo color box? if so can someone please show me how. i need to know what the javascript is going to be i have no idea how to make this work using javascript

  .foo { float: left; width: 20px; height: 20px; margin: 5px; border: 1px solid rgba(0, 0, 0, .2); } .white { background: #FFFFFF; } .yellow { background: #FAFF38; } .orange { background: #FFA200; } .red { background: #FF0000; } .dorange { background: #FF5500; } .lgreen { background: #80FF00; } .green { background: #45C731; } .turk { background: #17DDBC; } .lblue { background: #00A2FF; }.blue { background: #1713F6; }.purple { background: #AB09D3; }.black { background: #000000; } 

 <div id="colour"> <div class="foo white" data-image="http://mebe.co/mustang"> </div> <div class="foo black" data-image="http://mebe.co/ford"> </div> <div class="foo yellow" data-image="http://mebe.co/f150"> </div> <div class="foo orange" data-image="http://mebe.co/yukon"> </div> <div class="foo red" data-image="http://mebe.co/370z"> </div> <div class="foo dorange" data-image="http://mebe.co/gtr"> </div> <div class="foo lgreen" data-image="http://mebe.co/sentra"> </div> <div class="foo green" data-image="http://mebe.co/dodge"> </div> <div class="foo turk" data-image="http://mebe.co/civic"> </div> <div class="foo lblue" data-image="http://mebe.co/gmc"> </div> <div class="foo blue" data-image="http://mebe.co/bmw"> </div> <div class="foo purple" data-image="http://mebe.co/sentra"> </div> </div> <div class="container" style="background-color:lightgrey; border-width:1px; border-style:solid; width:500px; height:500px; z-index:1; visibility:; float: left; visibility:; background-color: lightgrey;visibility:;"></div> 

Answer 1

You can like this, just update the data-image .

 $(document).ready(function() { $('.foo.active').each(function(){ $('.container img').attr('src', $(this).data("image")); }); $('.foo').on('click',function(){ $('.container img').attr('src', ''); $('.container img').attr('src', $(this).data("image")); }); }); 

 .foo { float: left; width: 20px; height: 20px; margin: 5px; border: 1px solid rgba(0, 0, 0, .2); cursor: pointer; } .white { background: #FFFFFF; } .yellow { background: #FAFF38; } .orange { background: #FFA200; } .red { background: #FF0000; } .dorange { background: #FF5500; } .lgreen { background: #80FF00; } .green { background: #45C731; } .turk { background: #17DDBC; } .lblue { background: #00A2FF; } .blue { background: #1713F6; } .purple { background: #AB09D3; } .black { background: #000000; } .container { border-width: 1px; border-style: solid; width: 500px; z-index: 1; float: left; } .container img{ width: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="colour"> <div class="foo white active" data-image="https://opensource.org/files/osi_keyhole_300X300_90ppi.png"> </div> <div class="foo black" data-image="http://www.lilianricaud.com/travail-en-reseau/wp-content/uploads/2012/04/google-chrome-300x300.png"> </div> </div> <div class="container"> <img src="" alt="sample"> </div>