gistfile1.js

(function(document) {    
    var previewWrap = document.createElement('div'),
        preview = document.createElement('img');

    previewWrap.style.position = 'absolute';
    previewWrap.style.background = 'white';
    previewWrap.style.border = '1px solid black';
    previewWrap.style.transition = 'opacity 0.4s';
    previewWrap.style.opacity = 0;
    previewWrap.appendChild(preview);
    
    document.body.appendChild(previewWrap);

    function showPreview(e) {
        var el = e.currentTarget,
            parent = el.parentNode,
            x = parent.offsetLeft - parent.clientWidth,
            y = parent.offsetTop;

        preview.src = el.href;
        togglePreview();
        
        onImageLoad(preview, function() {
            previewWrap.style.left = x - (previewWrap.clientWidth || preview.width);
            previewWrap.style.top = y + ((previewWrap.clientHeight || preview.height) / 2);
        });
    }

    function togglePreview() {
        var showing = Math.floor(previewWrap.style.opacity);
        previewWrap.style.opacity = (showing) ? 0 : 1; // won't take bool lol
        previewWrap.style.visility = (showing) ? 'hidden' : 'visible';
    }

    var imageLinks = document.querySelectorAll('tr td:last-of-type a'); 
    for (var i = 0, n = imageLinks.length; i < n; i++) {
        imageLinks[i].addEventListener('mouseout', togglePreview, false);
        imageLinks[i].addEventListener('mouseover', showPreview, false);
    }

    // http://stackoverflow.com/questions/1977871/check-if-an-image-is-loaded-no-errors-in-javascript
    function onImageLoad(image, callback) {
        if (!image.complete || 
            (typeof image.naturalWidth !== "undefined" && image.naturalWidth === 0)) {
            image.addEventListener('load', callback, false);
        } else {
            callback();
        }
    }
})(document);