function ThzhotspotPosition(evt, el, hotspotsize, percent) {
var left = el.offset().left;
var top = el.offset().top;
var hotspot = hotspotsize ? hotspotsize : 0;
if (percent) {
x = (evt.pageX - left - (hotspot / 2)) / el.outerWidth() * 100 + '%';
y = (evt.pageY - top - (hotspot / 2)) / el.outerHeight() * 100 + '%';
} else {
x = (evt.pageX - left - (hotspot / 2));
y = (evt.pageY - top - (hotspot / 2));
}
return {
x: x,
y: y
};
}
$(function() {
$('.box').click(function(e) {
var hp = ThzhotspotPosition(e, $(this), 20, true); // true = percent | false or no attr = px
var hotspot = $('<div class="hotspot">').css({
left: hp.x,
top: hp.y,
});
$(this).append(hotspot);
$("span").text("X: " + hp.x + ", Y: " + hp.y);
});
});
.box {
width: 400px;
height: 400px;
background: #efefef;
margin: 20px;
padding: 20px;
position: relative;
top: 20px;
left: 20px;
}
.hotspot {
position: absolute;
left: 0;
top: 0;
height: 20px;
width: 20px;
background: green;
border-radius: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<p>Hotspot position is at: <span></span></p>
</div>