<div dir="ltr">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.<div style><a href="http://picturecollection.wikidot.com/test3:23">http://picturecollection.wikidot.com/test3:23</a><br>
</div><div style><br></div><div style>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.</div><div style><br></div><div style>Here is the code I used in Wikidot. Can this be done in PMWiki?</div>
<div style>-Mark</div><div style>---------------------------------------------------------------</div><div style><div>[[html]]<br></div><div><head></div><div><script language="JavaScript"></div><div>
function point_it(event){</div><div><span class="" style="white-space:pre"> </span>pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("myCanvas").offsetLeft;</div><div><span class="" style="white-space:pre"> </span>pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("myCanvas").offsetTop;</div>
<div><br></div><div><span class="" style="white-space:pre"> </span>document.pointform.form_x.value = pos_x;</div><div><span class="" style="white-space:pre"> </span>document.pointform.form_y.value = pos_y;</div><div><br></div>
<div>var c=document.getElementById("myCanvas");</div><div>var ctx=c.getContext("2d");</div><div>ctx.strokeStyle="#FF0000";</div><div>ctx.clearRect(0,0,100,100);</div><div><br></div><div>ctx.fillStyle = 'rgba(255,100,100,.4)'; </div>
<div>ctx.fillRect(document.pointform.form_x.value-20,document.pointform.form_y.value-20,40,40);</div><div>}</div><div></script></div><div></head></div><div><body></div><div><!-- taken from <a href="http://www.emanueleferonato.com/2006/09/02/click-image-and-get-coordinates-with-javascript/">http://www.emanueleferonato.com/2006/09/02/click-image-and-get-coordinates-with-javascript/</a> --></div>
<div><form name="pointform" method="post"></div><div>You pointed on x = <input type="text" name="form_x" size="4" /> , and y = <input type="text" name="form_y" size="4" /></div>
<div></form> </div><div><br></div><div><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');"></div>
<div>Your browser does not support the canvas element.</div><div></canvas></div><div><br></div><div></body></div><div>[[/html]]</div><div>-------------------------------------------------</div></div></div>