JSFiddle - React, Tailwind, and code Playground

by Ashish Kasama

HTML

<div id="pointbox">
<img src="http://lucentinnovation.com/img/header-bg.jpg" id="cross"/>
</div>
You pointed on x = <input type="text" id="form_x" size="4" /> - y = <input type="text" id="form_y" size="4" />

CSS

#pointbox{
    position:relative;
    display:inline-block;
    width:100%;
}
#cross{
    max-width:100%;
    display:block;
}
.point{
    position:absolute;
    top:0%;
    left:0%;
    width:20px;
    height:20px;
    border:2px solid #000;
    line-height:20px;
    display:block;
    cursor:pointer;
    margin-left:-10px;
    margin-top:-10px;
    text-align:center;
    font-family:arial;
    -webkit-animation: blink 2s infinite;
     -moz-animation:    blink 2s infinite;
     -ms-animation:     blink 2s infinite;
}

@-webkit-keyframes blink {
        0%   { border-color:#000; }
        50%  { border-color:#fff;}
        100% { border-color:#000; }
}
@-moz-keyframes blink {
        0%   { border-color:#000; }
        50%  { border-color:#fff;}
        100% { border-color:#000; }
}
@-ms-keyframes blink {
        0%   { border-color:#000; }
        50%  { border-color:#fff;}
        100% { border-color:#000; }
}

JavaScript

var num = 0;
$('#cross').click(function(e){
	pos_x = event.offsetX;
	pos_y = event.offsetY;
	$('#form_x').val(pos_x);
    $('#form_y').val(pos_y);
    var x = pos_x*100/$(this).width();
    var y = pos_y*100/$(this).height();
    
    var a = $('<a class="point">').css('left', x+"%").css('top', y+"%");
    a.html(num++);
    $('#pointbox').append(a);
});