mapsam · July 14, 2015 23:02
diff --git a/index.html b/index.html
 <html lang="en">
 <head>
  <title>hello world</title>
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <style>
  body {
    padding:0;
    margin:0;
  }
  img {
    width: 100%;
    height: auto;
  }
  .container {
    position: relative;
    display: block;
  }
  .square {
    position:absolute;
    border: 2px solid red;
  }
  </style>
 </head>
 <body>
  <div id="container" class="container"><img src="test.png"></div>
  <script>
  var ops = {
    container: 'container',
    squares: [
      {
        name: 'Block name',
        left: 30,
        top: 8,
        width: 45, // percentage of the entire screen width
        height: 10, // percentage of the entire document
        description: "WAKA FLAKA DESCRIPTION"
      }
    ]
  }
  function init() {
    window.app = new ImageTalk(ops);
  }



  var ImageTalk = function(options) {
    this.options = options || {};
    this.container = document.getElementById(options.container);
    this.squares = options.squares;

    this.startTalking(this.squares);
  }

  ImageTalk.prototype.startTalking = function(squares) {
    var _this = this;
    for (var s = 0; s < squares.length; s++) {
      _this.container.appendChild(_this.makeOneSquare(squares[s]));
    }
  }

  ImageTalk.prototype.makeOneSquare = function(square) {
    var s = document.createElement('div');
    s.className = 'square';
    s.style.left = square.left + '%';
    s.style.top = square.top + '%';
    s.style.width = square.width + '%';
    s.style.height = square.height + '%';
    return s;
  }
  window.onload = init;
  </script>
 </body>
 </html>
	<html lang="en">
	<head>
	<title>hello world</title>
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
	<style>
	body {
	padding:0;
	margin:0;
	}
	img {
	width: 100%;
	height: auto;
	}
	.container {
	position: relative;
	display: block;
	}
	.square {
	position:absolute;
	border: 2px solid red;
	}
	</style>
	</head>
	<body>
	<div id="container" class="container"><img src="test.png"></div>
	<script>
	var ops = {
	container: 'container',
	squares: [
	{
	name: 'Block name',
	left: 30,
	top: 8,
	width: 45, // percentage of the entire screen width
	height: 10, // percentage of the entire document
	description: "WAKA FLAKA DESCRIPTION"
	}
	]
	}
	function init() {
	window.app = new ImageTalk(ops);
	}



	var ImageTalk = function(options) {
	this.options = options \|\| {};
	this.container = document.getElementById(options.container);
	this.squares = options.squares;

	this.startTalking(this.squares);
	}

	ImageTalk.prototype.startTalking = function(squares) {
	var _this = this;
	for (var s = 0; s < squares.length; s++) {
	_this.container.appendChild(_this.makeOneSquare(squares[s]));
	}
	}

	ImageTalk.prototype.makeOneSquare = function(square) {
	var s = document.createElement('div');
	s.className = 'square';
	s.style.left = square.left + '%';
	s.style.top = square.top + '%';
	s.style.width = square.width + '%';
	s.style.height = square.height + '%';
	return s;
	}
	window.onload = init;
	</script>
	</body>
	</html>