Skip to content

Instantly share code, notes, and snippets.

@rackaam

rackaam/gist:decba7cade747f3f8f09

Created May 18, 2015 21:33
Show Gist options
  • Save rackaam/decba7cade747f3f8f09 to your computer and use it in GitHub Desktop.
Save rackaam/decba7cade747f3f8f09 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment