Jquery active link change src

Question

I have an paralax effect on site and I want to make active dot. But problem is that every dot must be diffrent on active

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

and when they`re not active i want them to be white.

And very important for me is to change src of image not .css

Here is code for one 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 to jsFiddle

Answer 1

You may try something like this (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 this for sequential
        var dot = $(this).closest('li').index();
        // use this for 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]);
    });
});

Answer 2

You can store the alternate image you want as a data attribute on the <a> (or img or li...)

  <li><a href="#intro" data-alt-image="dot-green.png" title="Next Section">
    <img src="https://path/to/dot.png" />
  </a></li>

And then point to it on click, resetting the others.

$('document').ready(function() {
    $('.paralax a').click(function(e) {
        // our alt image, stored on the <a>
        var altImg = $(this).attr('data-alt-image'),
            // keep the demo readable
            db = "https://dl.dropboxusercontent.com/u/64675374/circle2/";

        e.preventDefault();

        // reset the last one
        $('.paralax')
            .find('.active').removeClass('active')
            .find('img').attr("src", db+"dot.png");

        // point to the active image in the data-alt-image attribute              
        $(this).addClass('active').find('img').attr("src", db+altImg);
    });
});

Updated Fiddle