Frelseren · April 29, 2016 08:30
diff --git a/img-tagging.markdown b/img-tagging.markdown
diff --git a/index.html b/index.html
 <html>
  <head></head>
  <body>
    <div class="img-wrapper">
      <img src="https://i.ytimg.com/vi/GMkDBh1NnP0/maxresdefault.jpg" />
    </div>
  </body>
 </html>
diff --git a/script.babel b/script.babel
 $('.img-tag').hide();
 $('img').click(function (e) {
  const OFFSET = $(this).offset();
  const NUM = $('.img-tag').length + 1;
  const IMG_WIDTH = $(this).width();
  const LEFT_OFFSET = e.pageX - OFFSET.left + 'px';
  const TOP_OFFSET = e.pageY - OFFSET.top + 'px';
  console.log(LEFT_OFFSET);
  console.log(TOP_OFFSET);
  $(this).after(function() {
    return '<span class="img-tag" style="left:' 
      + LEFT_OFFSET 
      + ';top:' 
      + TOP_OFFSET 
      + ';">'
      + NUM
      + '</span>';
  });
 });
diff --git a/scripts b/scripts
 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
diff --git a/style.sass b/style.sass
 img
  max-width: 100%
  cursor: crosshair
 .img-wrapper
  position: relative
 .img-tag
  position: absolute
  background: red
  color: white
  padding: 3px 9px
  border-radius: 100px
  transform: translate(-50%)
	<html>
	<head></head>
	<body>
	<div class="img-wrapper">
	<img src="https://i.ytimg.com/vi/GMkDBh1NnP0/maxresdefault.jpg" />
	</div>
	</body>
	</html>
	$('.img-tag').hide();
	$('img').click(function (e) {
	const OFFSET = $(this).offset();
	const NUM = $('.img-tag').length + 1;
	const IMG_WIDTH = $(this).width();
	const LEFT_OFFSET = e.pageX - OFFSET.left + 'px';
	const TOP_OFFSET = e.pageY - OFFSET.top + 'px';
	console.log(LEFT_OFFSET);
	console.log(TOP_OFFSET);
	$(this).after(function() {
	return '<span class="img-tag" style="left:'
	+ LEFT_OFFSET
	+ ';top:'
	+ TOP_OFFSET
	+ ';">'
	+ NUM
	+ '</span>';
	});
	});