jQuery get img src within a href on click

I have this HTML / PHP code that displays multiple images.

     <div class="product-other-images">
                  <?php
                  for($i = 0; $i < sizeof($productImages); $i++)
                  {
                      echo '<a id="alternate-image" href="#"';
                      if($i == 0)
                        echo 'class="active"';
                      echo '><img alt="' . $productName . '" src="' . $productImages[$i][1] . '"></a>';
                  }
                  ?>
              </div>

When you click the a href, I want to select the src from the img on the inside. So far I have this code which works when I click the a href.

    var Item = function () {
return {
    init: function () {
        $(document).ready(function () {
            $('a').click(function () {
                if ($(this).prop('id') == 'alternate-image')
                {
                    var href = $(this).attr('href');
                    alert(href);
                }
            });
        });
    }
};

}();

I need to take the src from the image and change the main display image of another img src.

Should I just make the img src the jQuery trigger?