image - Jquery active link change src -

i have paralax effect on site , want make active dot. problem every dot must diffrent on active

1. green
2. orange
3. mint
4. blue

and when they`re not active want them white.

and important me change src of image not .css

here code 1 color active dot:

<ul class="paralax">               <li><a href="#intro" title="next section"><img src="https://dl.dropboxusercontent.com/u/64675374/circle2/dot.png" /></a></li>               <li><a href="#second" title="next section"><img src="https://dl.dropboxusercontent.com/u/64675374/circle2/dot.png" alt="link"  /></a></li>               <li><a href="#third" title="next section"><img src="https://dl.dropboxusercontent.com/u/64675374/circle2/dot.png" alt="link"  /></a></li>               <li><a href="#fifth" title="next section"><img src="https://dl.dropboxusercontent.com/u/64675374/circle2/dot.png" alt="link" /></a></li>               <li><a href="#six" title="next section"><img src="https://dl.dropboxusercontent.com/u/64675374/circle2/dot.png" alt="link" /></a></li> </ul> 

and jquery:

$('document').ready(function() {             $('.paralax img').click(function(e) {             e.preventdefault();             $('.paralax img').attr("src","images/dot.png");             $(this).attr("src","images/dot-green.png");         });         }); 

link jsfiddle

you may try (1.sequential colors 2. random colors):

$('document').ready(function() {     var dots = ['dot-green.png', 'dot-orange.png', 'dot-mint.png', 'dot-blue.png'];     $('.paralax img').click(function(e) {         e.preventdefault();         // use sequential         var dot = $(this).closest('li').index();         // use random         // var dot =  math.floor(math.random() * (dots.length - 1) +1);         $('.paralax img').attr("src","https://dl.dropboxusercontent.com/u/64675374/circle2/dot.png");         $(this).attr("src","https://dl.dropboxusercontent.com/u/64675374/circle2/" + dots[dot]);     }); });