JavaScript: Zooming does works as intended
<p>I suck at math so I cannot figure out what is required to make the zooming work properly. You see, when clicked for the first time, it works as intended (it zooms in to the desired position). But if you try to click more than once it won't zoom in to the desired position.</p>

<p>Here's the code (also provided at <a href="http://jsfiddle.net/XVmNU/" rel="nofollow">http://jsfiddle.net/XVmNU/</a>)</p>

<pre><code>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;style&gt;
            * {
                margin: 0;
                padding: 0;
            }

            html, body {
                height: 100%;
            }

            body {
                overflow: hidden;
            }
        &lt;/style&gt;
        &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"&gt;&lt;/script&gt;
        &lt;script&gt;
            (function ($) {
                var scale = 1;

                $(window).load(function () {
                    $('img:first').click(function (e) {
                        scale *= 1.5;

                        var w = $(this).width(),
                            h = $(this).height();

                        var new_w = w * scale,
                            new_h = h * scale;

                        var x = e.pageX,
                            y = e.pageY;

                        var new_x = Math.round(x / (w / new_w)),
                            new_y = Math.round(y / (h / new_h));

                        new_x = (0 - (new_x - x)),
                        new_y  = (0 - (new_y - y));    

                        $(this).animate({
                            left: new_x,
                            top: new_y,
                            width  : new_w,
                            height : new_h
                        }, 'fast');
                    });
                });
            })(jQuery);    
        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;img src="http://www.worldpress.org/images/maps/world_600w.jpg" style="position: absolute; left: 0px; top: 0px;"/&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>
