joehungjohn joehungjohn - 2 months ago 10
Javascript Question

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

enter image description here

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

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;

$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;

        $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>

Comments