mtso/tsukkomi.html

## tsukkomi.html
<!DOCTYPE html>

<html>
  <head>
  <style>
    body {
      padding: 10em;
    }
    .tsukkomi-enabled {
      /*margin: 10em;*/
      background-color: #f0f;
      position: relative;
      /*padding: 2em;*/
      width: 800px;
      /*height: 200px;*/
    }
    .tsukkomi-enabled img {
      width: 100%;
    }
  </style>
    <script type="text/javascript">

      // window.onload = function() {
      //   document.getElementById("test-image").onlick = function() {
      //     console.log("click");
      //     // console.log(event);
      //   };
      // };

      var clickImage = function(event) {
        var xPos = event.offsetX;
        var yPos = event.offsetY;

        console.log(xPos + ", " + yPos);

        var style = "style=\"\
          pointer-events: none; \
          position: absolute; \
          display: block; \
          background-color: #fff; \
          top: " + yPos + "px; \
          left: " + xPos + "px;\"";

        document.getElementById("op-image").innerHTML += "<div class=\"tsukkomi\" " + style + ">Hey what's up</div>";
      }
    </script>
  </head>

  <body>

  <div class="tsukkomi-enabled" id="op-image" onclick="clickImage(event)"> <!-- onclick="clickImage(event)"  -->
    <img

      src="http://media.fyre.co/HmWDsHkfTFyShq7GqbE1_b01.png"
      id="test-image"
    >
    </div>
  </body>

</html>
	<!DOCTYPE html>

	<html>
	<head>
	<style>
	body {
	padding: 10em;
	}
	.tsukkomi-enabled {
	/margin: 10em;/
	background-color: #f0f;
	position: relative;
	/padding: 2em;/
	width: 800px;
	/height: 200px;/
	}
	.tsukkomi-enabled img {
	width: 100%;
	}
	</style>
	<script type="text/javascript">

	// window.onload = function() {
	// document.getElementById("test-image").onlick = function() {
	// console.log("click");
	// // console.log(event);
	// };
	// };

	var clickImage = function(event) {
	var xPos = event.offsetX;
	var yPos = event.offsetY;

	console.log(xPos + ", " + yPos);

	var style = "style=\"\
	pointer-events: none; \
	position: absolute; \
	display: block; \
	background-color: #fff; \
	top: " + yPos + "px; \
	left: " + xPos + "px;\"";

	document.getElementById("op-image").innerHTML += "<div class=\"tsukkomi\" " + style + ">Hey what's up</div>";
	}
	</script>
	</head>

	<body>

	<div class="tsukkomi-enabled" id="op-image" onclick="clickImage(event)"> <!-- onclick="clickImage(event)" -->
	<img

	src="http://media.fyre.co/HmWDsHkfTFyShq7GqbE1_b01.png"
	id="test-image"
	>
	</div>
	</body>

	</html>