Div centered on cursor, acting as cursor for image-hover-zoom effect

Question

So I have a target div (large rectangle) which would be the target image. You'd hover over this, and you'd get a square that replaces the cursor with a portion of a larger/higher-resolution version of the same image.

I have the tracking down, and I've offset so that the div is centered on the cursor's position but the problem is, the target div can no longer be picked up, until the cursor leaves the overlay (goes outside of the square).

How can I get around this? Is it possible to replace the cursor with the div and still use the cursor?

I'm thinking just use the top-left coordinate of the big rectangle and go off that... still I don't know. Can you replace the cursor with a canvas object for example? I might still face the problem of not detecting the target div. I tried z-index that doesn't work.

edit: I might just hide the cursor and go to the left corner of the overlay square so it appears that you're centered over whatever you're supposedly pointing at.

<script type="text/javascript">
      // declare variables
      var target   = document.getElementById("target-area"),// $("#target-area") doesn't work?
          cursWind = $("#cursor-window"),
          prevX    = 0,
          prevY    = 0,
          cursX    = 0,
          cursY    = 0;
      // tracking
      // client is using a mouse
      target.addEventListener("mouseover", function( event ) {
        // run the tracking only while mouse is over the sensor range area
        target.addEventListener("mousemove", function ( event ) {

          /* when the mouse goes over target, a window with the center
           * at the cursor's position, should appear, this follows
             the cursor */


          /* cursor coordinates */
          // get cursor's current X and Y coordinates
          cursX = event.clientX;
          cursY = event.clientY;
          var coordString = cursX + " x" + "," + cursY + " y";
          // empty cursor-coord-disp
          $("#cursor-coord-disp").empty();
          // append X and Y coordinates to cursor-coord-disp
          $("#cursor-coord-disp").append(coordString);

          /* see if cursor is increasing or decreasing in x/y coordinates */
          // x-coord
          function checkX() {
            if (cursX > prevX) {
              prevX = cursX; // update old x-coord
              return ((-1) * cursX);
            }
            else {
              prevX = cursX; // update old x-coord
              return cursX;
            }
          }

          function checkY() {
            if (cursY > prevY) {
              prevY = cursY; // update old x-coord
              return ((-1) * cursY);
            }
            else {
              prevY = cursY; // update old x-coord
              return cursY;
            }
          }

          /* window replaces and follows cursor position */
          // get X and Y top-left coordinates of target-area
          var targPos = $("#target-area").position(),
              targX   = targPos.left,
              targY   = targPos.top;
          // console.log(targX + " vs " + targY);
          // show the hovering window that follows cursor
          $("#cursor-window").show();
          // reposition to cursor with offset
          // console.log(checkX());
          var newXCoord   = (event.clientX),
              newYCoord   = (event.clientY);
          console.log(newXCoord + ' vs ' + newYCoord);
          // translate to cursor position
          $("#cursor-window").css({
            'top'  : newYCoord - 150,
            'left' : newXCoord - 150
          });

        }, false);
      }, false);
    </script>

Answer 1

You can try with the following code and markup. The position is calculated by subtracting the position of the target div from the mouse cursor position in the page. The cursor window is visible only when the mouse is inside the target div limits.

 var $target = $("#target-area"), $cursorWindow = $("#cursor-window"), $coordsDisplay = $("#cursor-coord-disp"); var zoomFactor = 2; // Copy the background image to the zoom window $cursorWindow.css('background-image', $target.css('background-image')); $cursorWindow.css('background-repeat', $target.css('background-repeat')); $target.mousemove(function (e) { var $targetPosition = $target.position(); var cursX = e.pageX - $targetPosition.left; var cursY = e.pageY - $targetPosition.top; var imgX, imgY, imgW, imgH; if (0 <= cursX && cursX <= $target.outerWidth() && 0 <= cursY && cursY <= $target.outerHeight()) { $cursorWindow.css({ 'left': cursX - $cursorWindow.outerWidth() / 2, 'top': cursY - $cursorWindow.outerHeight() / 2 }); $cursorWindow.show(); $coordsDisplay.text("x: " + cursX.toFixed(0) + ", y: " + cursY.toFixed(0)); imgX = -(cursX * zoomFactor) + $cursorWindow.innerWidth() / 2; imgY = -(cursY * zoomFactor) + $cursorWindow.innerHeight() / 2; imgW = $target.innerWidth() * zoomFactor; imgH = $target.innerHeight() * zoomFactor; // Change the position and size of the image in the zoom window // to show a magnified view of the image content under the cursor $cursorWindow.css('background-position', imgX.toFixed(0) + 'px ' + imgY.toFixed(0) + 'px'); $cursorWindow.css('background-size', imgW.toFixed(0) + 'px ' + imgH.toFixed(0) + 'px'); } else { $cursorWindow.hide(); $coordsDisplay.text(""); } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="cursor-coord-disp" style="width: 140px; height: 24px; border: solid 1px black;"></div> <div id="target-area" style="cursor: none; position: relative; left: 0px; top: 10px; width: 320px; height: 240px; background: url('http://loremflickr.com/320/240/dog') no-repeat; border: solid 1px black; "> <div id="cursor-window" style="display: none; cursor: none; position: absolute; left: 0px; top: 80px; width: 100px; height: 100px; border: solid 1px black;"></div> </div>