rackaam/gist:decba7cade747f3f8f09

## gistfile1.txt
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="UTF-8"/>
    <link rel="stylesheet" type="text/css" href="map.css" media="screen" />
  </head>
  <body>

    <script type="text/javascript">
    function getMouseXY(e) {
       var e = (!e) ? window.event : e;
       if (e.pageX || e.pageY) {
          posX = e.pageX;
          posY = e.pageY;
       }
       else if (e.clientX || e.clientY) {
          if (document.body.scrollLeft || document.body.scrollTop) {
             posX = e.clientX + document.body.scrollLeft;
             posY = e.clientY + document.body.scrollTop;
          }
          else {
             posX = e.clientX + document.documentElement.scrollLeft;
             posY = e.clientY + document.documentElement.scrollTop;
          }
       }
       var myLayer = document.createElement('div');
        myLayer.id = 'bookingLayer';
        myLayer.style.position = 'absolute';
        myLayer.style.left = (posX-15) +'px';
        myLayer.style.top = (posY-15) + 'px';
        myLayer.style.width = '30px';
        myLayer.style.height = '30px';
        myLayer.style.background = '#00ff00';
       // document.body.appendChild(myLayer);
        document.getElementById("root").appendChild(myLayer);
       //document.getElementById("demo").innerHTML += "<span>Paragraph changed.</span>";
       document.getElementById("pos").innerHTML = "x: " + posX + "\ny: " + posY;
    }
    </script>

    <div>
        <img src="map.svg" alt="" onclick="getMouseXY(event)" />
        <div id="root" onclick="getMouseXY(event)"></div>
        <div id="pos" class="item">pos</div>
    </div>

  </body>
</html>

-------------------------------

body{
    position:relative;
    margin:0;
    padding:0;
}

.pos {
    position: absolute;
    top: 10px;
    left: 60px;
}

img{
    margin:0;
    padding:0;
}

#root {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width:100%;
}
	<!DOCTYPE html>
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta charset="UTF-8"/>
	<link rel="stylesheet" type="text/css" href="map.css" media="screen" />
	</head>
	<body>

	<script type="text/javascript">
	function getMouseXY(e) {
	var e = (!e) ? window.event : e;
	if (e.pageX \|\| e.pageY) {
	posX = e.pageX;
	posY = e.pageY;
	}
	else if (e.clientX \|\| e.clientY) {
	if (document.body.scrollLeft \|\| document.body.scrollTop) {
	posX = e.clientX + document.body.scrollLeft;
	posY = e.clientY + document.body.scrollTop;
	}
	else {
	posX = e.clientX + document.documentElement.scrollLeft;
	posY = e.clientY + document.documentElement.scrollTop;
	}
	}
	var myLayer = document.createElement('div');
	myLayer.id = 'bookingLayer';
	myLayer.style.position = 'absolute';
	myLayer.style.left = (posX-15) +'px';
	myLayer.style.top = (posY-15) + 'px';
	myLayer.style.width = '30px';
	myLayer.style.height = '30px';
	myLayer.style.background = '#00ff00';
	// document.body.appendChild(myLayer);
	document.getElementById("root").appendChild(myLayer);
	//document.getElementById("demo").innerHTML += "<span>Paragraph changed.</span>";
	document.getElementById("pos").innerHTML = "x: " + posX + "\ny: " + posY;
	}
	</script>

	<div>
	<img src="map.svg" alt="" onclick="getMouseXY(event)" />
	<div id="root" onclick="getMouseXY(event)"></div>
	<div id="pos" class="item">pos</div>
	</div>

	</body>
	</html>

	-------------------------------

	body{
	position:relative;
	margin:0;
	padding:0;
	}

	.pos {
	position: absolute;
	top: 10px;
	left: 60px;
	}

	img{
	margin:0;
	padding:0;
	}

	#root {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width:100%;
	}