Hi,
Could anyone help me to return the x and y coordinates for a mouse click using an HTML form in Medialab using the custom feature? We need a blank square which covers the greater percentage of the screen that can be clicked on in any location to guess where an object is hidden. Bit like battleships but only one shot.
I found the following HTML Javascript code which I was trying modify and use:
<!doctype html>
<html>
<head>
<title>Get the coordinates on canvas</title>
<meta charset="utf-8" />
<style type="text/css">
#canvas{background-color: #000;}
</style>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", init, false);
function init()
{
var canvas = document.getElementById("canvas");
canvas.addEventListener("mousedown", getPosition, false);
}
function getPosition(event)
{
var x = new Number();
var y = new Number();
var canvas = document.getElementById("canvas");
if (event.x != undefined && event.y != undefined)
{
x = event.x;
y = event.y;
}
else // Firefox method to get the position
{
x = event.clientX + document.body.scrollLeft +
document.documentElement.scrollLeft;
y = event.clientY + document.body.scrollTop +
document.documentElement.scrollTop;
}
x -= canvas.offsetLeft;
y -= canvas.offsetTop;
alert("x: " + x + " y: " + y);
}
</script>
</head>
<body>
<canvas id="canvas" width="640" height="360"></canvas>
</body>
</html>