title: javascript - How to zoom an image over the mouse position and display result on div
body: <p>I'm trying to zoom an image and display the result on a div that's around the cursor, something like <a href="https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_image_zoom" rel="nofollow noreferrer">w3schools</a> does, except they display the result on another image and "I'm not". </p>
  
  <p>The problem is, the zoom is not exactly right with respect to the mouse cursor, it's displaying the closest pixels but not the right ones, and I can't figure out why.</p>
  
  <p>Here's the <a href="https://jsfiddle.net/Dogmaflow/pobgq2da/3/" rel="nofollow noreferrer">snippet</a>.</p>
  
  <p>My CSS:</p>
  
  <pre><code>* {
    box-sizing: border-box;
  }
  
  .img-zoom-container {
    position: relative;
  }
  
  .img-zoom-lens {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-radius: 40px;
    width: 70px;
    height: 70px;
  }
  
  .img-zoom-result {
    border: 1px solid #d4d4d4;
    width: 300px;
    height: 300px;
  }
  
  .crosshair {
    cursor: crosshair;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;h1&gt;Image Zoom&lt;/h1&gt;
  
  &lt;p&gt;Mouse over the image:&lt;/p&gt;
  
  &lt;div class="img-zoom-container crosshair"&gt;
    &lt;img id="myimage" src="https://www.pasionfutbol.com/__export/1506450064123/sites/pasionlibertadores/img/2017/09/26/puyol3c.jpg_715985292.jpg"&gt;
    &lt;div id="myresult" class="img-zoom-result"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;p&gt;The image must be placed inside a container with relative positioning.&lt;/p&gt;
  &lt;p&gt;The result can be put anywhere on the page, but must have the class name "img-zoom-result".&lt;/p&gt;
  &lt;p&gt;Make sure both the image and the result have IDs. These IDs are used when a javaScript initiates the zoom effect.&lt;/p&gt;
  </code></pre>
  
  <p>The JS:</p>
  
  <pre><code>function imageZoom(imgID, resultID) {
    var img, lens, result, cx, cy;
    img = document.getElementById(imgID);
    result = document.getElementById(resultID);
    /*create lens:*/
    lens = document.createElement("DIV");
    lens.setAttribute("class", "img-zoom-lens");
    /*insert lens:*/
    img.parentElement.insertBefore(lens, img);
    /*calculate the ratio between result DIV and lens:*/
    cx = result.offsetWidth / lens.offsetWidth;
    cy = result.offsetHeight / lens.offsetHeight;
    /*set background properties for the result DIV:*/
    lens.style.backgroundImage = "url('" + img.src + "')";
    lens.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
    /*execute a function when someone moves the cursor over the image, or the lens:*/
    lens.addEventListener("mousemove", moveLens);
    img.addEventListener("mousemove", moveLens);
    /*and also for touch screens:*/
    lens.addEventListener("touchmove", moveLens);
    img.addEventListener("touchmove", moveLens);
    function moveLens(e) {
      var pos, x, y;
      /*prevent any other actions that may occur when moving over the image:*/
      e.preventDefault();
      /*get the cursor's x and y positions:*/
      pos = getCursorPos(e);
      /*calculate the position of the lens:*/
      x = pos.x - (lens.offsetWidth / 2);
      y = pos.y - (lens.offsetHeight / 2);
      /*prevent the lens from being positioned outside the image:*/
      if (x &gt; img.width - lens.offsetWidth) {x = img.width - lens.offsetWidth;}
      if (x &lt; 0) {x = 0;}
      if (y &gt; img.height - lens.offsetHeight) {y = img.height - lens.offsetHeight;}
      if (y &lt; 0) {y = 0;}
      /*set the position of the lens:*/
      lens.style.left = x + "px";
      lens.style.top = y + "px";
      /*display what the lens "sees":*/
      lens.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
    }
    function getCursorPos(e) {
      var a, x = 0, y = 0;
      e = e || window.event;
      /*get the x and y positions of the image:*/
      a = img.getBoundingClientRect();
      /*calculate the cursor's x and y coordinates, relative to the image:*/
      x = e.pageX - a.left;
      y = e.pageY - a.top;
      /*consider any page scrolling:*/
      x = x - window.pageXOffset;
      y = y - window.pageYOffset;
      return {x : x, y : y};
    }
  }
  
  imageZoom("myimage", "myresult");
  </code></pre>
  
  <p>As you see is a copy-paste code from w3schools, but I need to do the changes I've explained above.</p>