title: How to convert this js grid into a Cartesian coordinate system?
body: <p>Hello i am working with this js which provides coordinates for the place you click in the container. However you will notice 0 is starting in the top left. I would like 0 to always be dead center like a Cartesian Coordinate system. Im just not sure how to do it  outside of a canvas.</p>
  <p>This is what i got so far but how to define the center as 0?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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("cross").style.left = (pos_x - 6).toString() + "px";
      document.getElementById("cross").style.top = (pos_y - 10).toString() + "px";
      document.getElementById("cross").style.visibility = "visible" ;
      document.pointform.form_x.value = pos_x;
      document.pointform.form_y.value = pos_y;
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#pointer_div {
      background-image: url('http://www.emanueleferonato.com/images/sun.jpg');
      width: 500px;
      height: 333px;
  }
  #cross {
      position: relative;
      visibility: hidden;
      z-index: 2;
      color: white;
      font-size: 14px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form name="pointform" method="post"&gt;
  &lt;div id="pointer_div" onclick="point_it(event)"&gt;&lt;i id="cross" class="fa fa-times"&gt;&lt;/i&gt;&lt;/div&gt;
  You pointed on x = &lt;input type="text" name="form_x" size="4" /&gt; - y = &lt;input type="text" name="form_y" size="4" /&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>