Question

Question: I got a Picture on the website (as <img>) and a div which i want to move over it with the mouse. This works quite good, but something does not work: If I enter the image, the onmouseover event takes place, but if I move the mouse, there is always the event onmousemove AND onmouseover triggered, which is not correct.

What am I doing wrong?

EDIT

You can see the examples here: http://ykg-clan.de/puzzle

You have to click on the lower checkbox ("Bereich zum Ausschneiden wählen") and upload an image which is bigger than 600×600. In Email, write "@.". I’m sorry but its German 😉

EDIT2

Now you can see below the image two lines which are growing if the mouse is on the image. The upper line adds always when event onmouseover is triggered, a ‘now’. The under line adds always when event onmouseout is triggered, a ‘now’. As you can see, the lines are growing very fast, so they have to be called in an endless loop …?

Answer 1

Here is an example that I made, it’s actually doing the zooming too. I only used onmousemove and check every move if the cursor is still in the area of the image. If this is not the case, the zoom box is hidden. I added borders to both the zoom box and the images, so that you can see that it effectively works with borders (with some checks for IE here and there).

First some CSS. Do the styling so that it is looking the same as when JavaScript is disabled. In the JavaScript some CSS properties have to be set again, because you can’t use them without doing that.

body        { text-align:center; margin:0 }
#zoombox    { border:5px solid gray; display:none; position:absolute }
img         { border:2px solid darkgray }

JavaScript. See window.onload for the redefinitions. I know this is pretty dumb, but it won’t work without doing it. Note also the IE version check at the top of the code.

var ieVersion = undefined;
if (navigator.appName == 'Microsoft Internet Explorer') {
    var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
    if (re.exec(navigator.userAgent) != null) ieVersion = parseInt(RegExp.$1);
}
function cursor(e) {
    if (!e) e = window.event;
    if (e.pageX || e.pageY)
        return { 'x' : e.pageX, 'y' : e.pageY };
    else if (e.clientX || e.clientY) {
        if (ieVersion > 5)
            return { 'x' : e.clientX + document.documentElement.scrollLeft, 'y' : e.clientY + document.documentElement.scrollTop };
        else
            return { 'x' : e.clientX + document.body.scrollLeft, 'y' : e.clientY + document.body.scrollTop };
    }
}
function zoomba(context, e) {
    zoom.style.display = 'block';
    zoom.style.backgroundImage = 'url(' + context.src + ')';
    document.onmousemove = function(e) {
        var w = context.width;
        var h = context.height;
        var x = context.offsetLeft;
        var y = context.offsetTop;
        var b = parseInt(context.style.borderWidth)

        var xmouse = cursor(e).x - x - b;
        var ymouse = cursor(e).y - y - b;

        if (xmouse >= 0 && xmouse <= w && ymouse >= 0 && ymouse <= h) {
            var zw = parseInt(zoom.style.width);
            var zh = parseInt(zoom.style.height);
            var zb = ieVersion < 6 ? 0 : parseInt(zoom.style.borderWidth)

            zoom.style.left                 =   xmouse * (w - zw - zb * 2) / w + x + b + 'px';
            zoom.style.top                  =   ymouse * (h - zh - zb * 2) / h + y + b + 'px';
            zoom.style.backgroundPosition   =   (xmouse + zw / 2) * 100 / (w + zw) + '% ' +
                                                (ymouse + zh / 2) * 100 / (h + zh) + '%';
        } else {
            zoom.style.display = 'none';
            return false;
        }
    }
}
window.onload = function() {
    zoom = document.createElement('div');
    zoom.setAttribute('id', 'zoombox');
    zoom.style.width = '150px';
    zoom.style.height = '150px';
    zoom.style.borderWidth = '5px';
    document.body.appendChild(zoom);
    var img = document.getElementsByTagName('img');
    for (var i = 0; i < img.length; i++)
        img[i].style.borderWidth = '2px';
}

The position calculation for the zoom box is pretty complex, but I simplified the variable names for better readability. If you want to optimize the code, I would suggest to use fixed numbers for the zoom box dimensions and border sizes, instead of making variables for this.

HTML example:

<p>
    <img src="http://static.tumblr.com/noiu98j/gUplb4j88/trollface.jpg" onmousemove="zoomba(this, event)" width="400" height="365" alt="Trollface" />
    <img src="http://static.tumblr.com/noiu98j/gUplb4j88/trollface.jpg" onmousemove="zoomba(this, event)" width="300" height="274" alt="Trollface" />
</p>
<p>
    <img src="http://www.worldfactsandfigures.com/maps/802802.jpg" onmousemove="zoomba(this, event)" width="1000" height="542" alt="Earth map" />
</p>

Simply set a smaller size for the image with <img> width and height attributes. The zoomed image is the image with its actual size (because it’s set as background image using CSS). An alternative could be to have two images: a zoomed version and the original. Then you can change the background image for the zoom box using a prefix added to context.src. (You’ll have to split context.src into directory and filename, and add the prefix in between so that you get a valid URL.)

This works perfectly with XHTML 1.0 Strict Doctype. Works fine in IE5.5, IE6, IE7, IE8, Safari 5, Firefox 4, Chrome 6 and Navigator 9. The only problem that I encountered in old IE versions, is that the zoomed image isn’t being catched, so on every mouse move the image is redownloaded. Would be nice if somebody has a fix for this.

Example here

---

Keep only the box, no zooming

If you simple want a moving box and no actual zooming, comment out the following lines:

function zoomba(context, e) {
    zoom.style.display = 'block';
//  zoom.style.backgroundImage = 'url(' + context.src + ')';
    document.onmousemove = function(e) {
        var w = context.width;
        var h = context.height;
        var x = context.offsetLeft;
        var y = context.offsetTop;
        var b = parseInt(context.style.borderWidth)

        var xmouse = cursor(e).x - x - b;
        var ymouse = cursor(e).y - y - b;

        if (xmouse >= 0 && xmouse <= w && ymouse >= 0 && ymouse <= h) {
            var zw = parseInt(zoom.style.width);
            var zh = parseInt(zoom.style.height);
            var zb = ieVersion < 6 ? 0 : parseInt(zoom.style.borderWidth)

            zoom.style.left                 =   xmouse * (w - zw - zb * 2) / w + x + b + 'px';
            zoom.style.top                  =   ymouse * (h - zh - zb * 2) / h + y + b + 'px';
//          zoom.style.backgroundPosition   =   (xmouse + zw / 2) * 100 / (w + zw) + '% ' +
//                                              (ymouse + zh / 2) * 100 / (h + zh) + '%';
        } else {
            zoom.style.display = 'none';
            return false;
        }
    }
}