Question

I have this script:
http://jsfiddle.net/ZhXf5/3/

When you hover over one of the boxes, the “popup” div is positioned above the box with different sized images. How can I make these different sized images centered above the div?

Answer 1

You need to do a bit more math after the image has been loaded to place the thumbnail correctly (updated jsfiddle):

$("document").ready(function () {

    $("div.box").hover(function() {

        var positionleft = $(this).position().left + $(this).outerWidth() / 2;
        var positiontop = $(this).position().top;

        var img = $("<img src='"+$(this).text()+"' />");
        $("div.popup div.image").html(img);

        img.load(function() {
            $("div.popup").css({
                display: 'block',
                left: positionleft - (img.outerWidth() / 2),
                top: positiontop - img.outerHeight() - 20,
            });   
        });
    });   

});​