Image clicker dots

by jimkennelly

HTML

<select id="JobSelect">
<item value="1">abc</item>
<item value="2">333</item>
<item value="3">test</item>
</select>

<div id="container">
<div id="circle" class="positioning"></div>

</p><img id="Plat" src="http://www.olthofhomes.com/OlthofImages/All/000097_000099_009737_Ashford_Place_800_AshfordPlaceCommunityPlat_1152_768.jpg"
height="600" width="900">
</div>

CSS

#circle {
    background: #f00;
    left:300px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}
.positioning{
  position: relative;
  right: 10%;
  bottom: 50%;
  background-color: red;
  color: white;
  padding: 4px;
  font-size: 17px;
  line-height: 18px;
}

JavaScript

$(document).ready(function(){

$("#Plat").click(function(ev){
 var x = ev.pageX - this.offsetLeft;
 var y = ev.pageY - this.offsetTop;
alert(x + ' ' + y)


  			mouseX = ev.pageX;
        mouseY = ev.pageY
        console.log(mouseX + ' ' + mouseY);
        var color = '#000000';
        var size = '1px';
        $("body").append(
            $('<div></div>')
                .css('position', 'absolute')
                .css('top', mouseY + 'px')
                .css('left', mouseX + 'px')
                .css('width', size)
                .css('height', size)
                .css('background-color', color)
        );
        })

});