#StackBounty: #javascript #image #zoom #absolute How do you zoom into a specific point (no canvas)?

Bounty: 100

The goal is simple, using a mousewheel, zoom into a specific point (where the mouse is). This means after zooming the mouse will be in the same roughly the same spot of the picture.

Example of mouse mantaining position after zooming
(Purely illustrative, I don’t care if you use dolphins, ducks or madonna for the image)

I do not wish to use canvas, and so far I’ve tried something like this:


<img src="whatever">


function zoom(e){
    var deltaScale = deltaScale || -e.deltaY / 1000;
    var newScale = scale + deltaScale;
    var newWidth = img.naturalWidth * newScale;
    var newHeight = img.naturalHeight * newScale;
    var x = e.pageX;
    var y = e.pageY;
    var newX = x * newWidth / img.width;
    var newY = y * newHeight / img.height;
    var deltaX = newX - x;
    var deltaY = newY - y;

function setPosDelta(dX, dY) {
    var imgPos = getPosition();
    setPosition(imgPos.x + dX, imgPos.y + dY);

function getPosition() {
    var x = parseFloat(img.style.left);
    var y = parseFloat(img.style.top);
    return {
        x: x,
        y: y

function setScale(n) {
    scale = n;
    img.width = img.naturalWidth * n;
    img.height = img.naturalHeight * n;

What this attempts to do is calculate the x,y coordinates of the dolphin’s eye before and after the zoom, and after calculating the distance between those two points, substracts it from the left,top position in order to correct the zoom displacement, with no particular success.

The zoom occurs naturally extending the image to the right and to the bottom, so the correction tries to pull back to the left and to the top in order to keep the mouse on that damn dolphin eye! But it definitely doesn’t.

Tell me, what’s wrong with the code/math? I feel this question is not too broad, considering I couldn’t find any solutions besides the canvas one.


Get this bounty!!!