JavaScript Image Trail Tooltip by Taufik Nurrohman, inspired from http://www.sxc.hu

http://gplus.to/tovic

by Taufik Nurrohman

HTML

<img alt="Thumbnail 1" src="http://4.bp.blogspot.com/_yGa4b5VGx6w/THSCxHYp-JI/AAAAAAAAAII/2JDo41KaOog/s100/tree_forest_rural_243183_l.jpg" data-image-preview="http://4.bp.blogspot.com/_yGa4b5VGx6w/THSCxHYp-JI/AAAAAAAAAII/2JDo41KaOog/s300/tree_forest_rural_243183_l.jpg" />
<img alt="Thumbnail 2" src="http://1.bp.blogspot.com/-YnCv8Rv_5zg/UZxRoAJ0_BI/AAAAAAAAHco/eC2lojuGZ6I/s100/autumn-winter-20102.jpg" data-image-preview="http://1.bp.blogspot.com/-YnCv8Rv_5zg/UZxRoAJ0_BI/AAAAAAAAHco/eC2lojuGZ6I/s300/autumn-winter-20102.jpg" />
<img alt="Thumbnail 3" src="http://4.bp.blogspot.com/-wRHHclIdpXE/TaFlY16l_qI/AAAAAAAAALE/0BhXZd5-qhA/s100/cherry-blossom_viewing.jpg" data-image-preview="http://4.bp.blogspot.com/-wRHHclIdpXE/TaFlY16l_qI/AAAAAAAAALE/0BhXZd5-qhA/s300/cherry-blossom_viewing.jpg" />
<!-- No Preview -->
<img alt="No Thumbnail Preview" title="No Preview" src="http://1.bp.blogspot.com/-mNhRTmkZ284/T1tMrR1TNPI/AAAAAAAACTk/a6PapXX4T6Q/s100/LavenderFlowers.jpg" />

CSS

body {
    padding:10px;
    background-color:white;
}
/* Image Trail Tooltip CSS */
 .trail-image {
    width:0;
    height:0;
    background-color:#ddd;
    border:1px solid #888;
    position:absolute;
    top:-9999px;
    left:-9999px;
    z-index:9999;
    visibility:hidden;
    -webkit-box-shadow:0 1px 1px rgba(0, 0, 0, .2);
    -moz-box-shadow:0 1px 1px rgba(0, 0, 0, .2);
    box-shadow:0 1px 1px rgba(0, 0, 0, .2);
}

JavaScript

/*! JavaScript Image Trail Tooltip by Taufik Nurrohman <http://gplus.to/tovic> */
(function (w, d) {

    var tooltip = d.createElement('div'),
        noImage = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7", // 1 x 1 pixel transparent GIF
        top = 0,
        left = 0,
        docWidth = 0,
        docHeight = 0,
        offsetTop = 20, // Default top distance of the tooltip to the mouse pointer
        offsetLeft = 20, // Default left distance of the tooltip to the mouse pointer
        wait = null;

    // Get the correct width of the document without scrollbars
    function getDocWidth() {
        return d.documentElement.clientWidth;
    }

    // Get the correct height of the document
    function getDocHeight() {
        return Math.max(
        d.body.scrollHeight, d.documentElement.scrollHeight,
        d.body.offsetHeight, d.documentElement.offsetHeight,
        d.body.clientHeight, d.documentElement.clientHeight);
    }

    tooltip.id = "trail-image";
    tooltip.className = "trail-image";
    tooltip.innerHTML = '<img src="' + noImage + '" alt="Loading..." style="float:none;display:block;width:100%;height:100%;max-width:none;max-height:none;min-width:0;min-height:0;border:none;outline:none;background:none;margin:0;padding:0;">';

    // Just like `DOMContentLoaded` event, but only to
    // wait for the existence of the `<body>` element
    // to insert the tooltip markup in the proper area
    function waitForBodyExist() {
        if (!d.body) {
            wait = setTimeout(waitForBodyExist, 100);
        } else {
            clearTimeout(wait);
            d.body.appendChild(tooltip);
            docWidth = getDocWidth();
            docHeight = getDocHeight();
            w.onresize = function () {
                docWidth = getDocWidth();
                docHeight = getDocHeight();
            };
            w.onscroll = hideTrail;
        }
        // console.log('Still waiting...');
    }
   ...