Home/ Questions/Q 8593487
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T23:59:59+00:00

I am developing a smart phone app and I am trying to place a

  • 0

I am developing a smart phone app and I am trying to place a ‘note’ or a ‘marker’ over an image. I have not got a potential solution for this, I am starting out new with this sorta thing.

I am using http://www.icenium.com/ for the app distribution.

Is it possible to tap / click somewhere and add an element (div) to be always at that point on the image with javascript?

Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here’s some code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
        <script language="JavaScript">
            function point_it(event){
                pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("pointer_div").offsetLeft;
                pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("pointer_div").offsetTop;
                document.getElementById("imgcr").style.left = (pos_x-7)+"px" ;
                document.getElementById("imgcr").style.top = (pos_y-8)+"px" ;
                document.getElementById("imgcr").style.visibility = "visible" ;
                document.pointform.form_x.value = pos_x;
                document.pointform.form_y.value = pos_y;
            }
        </script>
  </head>
  <body>
    <form name="pointform" method="post">
        <div id="pointer_div" onclick="point_it(event)" style = "background-image:url('http://www.woofers.net/communities/6/004/008/640/226/images/4555331877.jpg');width:500px;height:333px;">
        <img src="http://galeriejeanclaudebergeron.ca/images/redDot.png" id="imgcr" style="position:relative;visibility:hidden;z-index:2;"></div>
        You pointed on x = <input type="text" name="form_x" size="4" /> - y = <input type="text" name="form_y" size="4" />
    </form>
  </body>
</html>

    Copy paste this into a new file and open it on your browser. In this example I move a div to the position, but you’ll have to clone it if you want multiple points

    Try it on jsfiddle

    • 0