javascript - 画像の位置に応じて円の中心を配置する

Question

   <style type="text/css">
#field
{
    width:500px;
    height:500px;
    border:1px solid black;
    }
    .Ninjaimg
    {
        position:absolute;
        width:30px;
        height:30px;
        display:none;
        cursor:pointer;
     }
        .circlle
        {
         width: 150px;
        height: 150px;
        -moz-border-radius: 50%;
        border-radius: 50%;
        border:1px solid black;
        position: relative;
        z-index: 1;
        display:none;
        }
</style>  
     <script type="text/javascript">  
        function makeNewPosition() {

            // Get viewport dimensions (remove the dimension of the div)
            var h = $("#field").height() - 30;
            var w = $("#field").width() - 30;

            var nh = Math.floor(Math.random() * h);
            var nw = Math.floor(Math.random() * w);

            return [nh, nw];

        }

        $("#Start").click(function () {
            var newq1 = makeNewPosition();
            var newq2 = makeNewPosition();
            $("#ninjaimage1").css("display", "block");
            $("#ninjaimage1").animate({ top: newq1[0], left: newq1[1] });
            $("#ninjaimage2").css("display", "block");
            $("#ninjaimage2").animate({ top: newq2[0], left: newq2[1] });
            // $(this).attr("disabled","disabled");
        });
      </script>
     <div id="field" >
    <img src="ninja.png" id="ninjaimage1" class="Ninjaimg"  />
    <img src="img1.jpg" id="ninjaimage2" class="Ninjaimg" />
    <div id="cirlce1" class="circlle"></div>
    <div id="cirlce2" class="circlle"></div>
      </div>
       <input type="button" id="Start" value="startGame"  />

startgameをクリックすると、2つの画像がdiv内でランダムな位置になります私の質問は、2つの画像がその位置を取るときに、2つの円を中心が画像自体になるように配置したいということです