[pmwiki-users] displaying coordinates of mouse click

Wed Jun 5 13:20:34 CDT 2013

I really like PMWiki. I am moving my wiki to this platform. This parallel
site is at Wikidot, and one of the things I did there is shown below.
http://picturecollection.wikidot.com/test3:23

If you click on the picture, the click location is captured behind the
scenes, then X and Y coordinates are displayed in a couple text boxes.

Here is the code I used in Wikidot. Can this be done in PMWiki?
-Mark
---------------------------------------------------------------
[[html]]
<head>
<script language="JavaScript">
function point_it(event){
pos_x =
event.offsetX?(event.offsetX):event.pageX-document.getElementById("myCanvas").offsetLeft;
pos_y =
event.offsetY?(event.offsetY):event.pageY-document.getElementById("myCanvas").offsetTop;

document.pointform.form_x.value = pos_x;
document.pointform.form_y.value = pos_y;

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeStyle="#FF0000";
ctx.clearRect(0,0,100,100);

ctx.fillStyle = 'rgba(255,100,100,.4)';
ctx.fillRect(document.pointform.form_x.value-20,document.pointform.form_y.value-20,40,40);
}
</script>
</head>
<body>
<!-- taken from
http://www.emanueleferonato.com/2006/09/02/click-image-and-get-coordinates-with-javascript/-->
<form name="pointform" method="post">
You pointed on x = <input type="text" name="form_x" size="4" /> , and y =
<input type="text" name="form_y" size="4" />
</form>

<canvas id="myCanvas" onclick="point_it(event)" width="100" height="100"
style="border:1px solid #c3c3c3;
background-image:url('/local--files/test3:23/flemish2.jpg');">
Your browser does not support the canvas element.
</canvas>

</body>
[[/html]]
-------------------------------------------------
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://www.pmichaud.com/pipermail/pmwiki-users/attachments/20130605/01263db7/attachment.html>